亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用CSS實現黑白格背景效果

  發(fā)布時間：2022-05-30 15:41:32   作者：水開泡茶   我要評論
在頁面上，有時會需要展示一些透明背景的圖片，為了展示其透明的背景，通常會像PS一樣，使用黑白相間的格子組成背景，從而告訴用戶，這是一張透明的圖片，本文給大家介紹使用CSS實現黑白格背景，感興趣的朋友一起看看吧

需求介紹

在頁面上，有時會需要展示一些透明背景的圖片，為了展示其透明的背景，通常會像PS一樣，使用黑白相間的格子組成背景，從而告訴用戶，這是一張透明的圖片。

效果預覽

實現原理

1.利用漸變(background: linear-gradient())的效果來實現黑白相間，如下代碼：

<style>
    #app {
	width: 200px;
	height: 200px;
	background: linear-gradient(
      		rgba(0, 0, 0, 0.4) 25%,
      		transparent 25%,
      		transparent 75%,
      		rgba(0, 0, 0, 0.4) 75%,
                rgba(0, 0, 0, 0.4) 100%
        )
    }
</style>
</head>

<body>
	<div id="app"></div>
</body>

效果：

2.然后加以旋轉，使?jié)u變背景傾斜，代碼：

#app {
	width: 200px;
	height: 200px;
        background: linear-gradient(
                45deg,
      		rgba(0, 0, 0, 0.4) 25%,
      		transparent 25%,
      		transparent 75%,
      		rgba(0, 0, 0, 0.4) 75%,
                rgba(0, 0, 0, 0.4) 100%
       );
}

效果：

3.然后設置背景大小，并且使其自動平鋪填充background-repeat:repeat;, 因為默認就是平鋪，所以不用特地設置這個值，只需設置背景大小即可：

#app {
	width: 200px;
	height: 200px;
        background: linear-gradient(
                45deg,
      		rgba(0, 0, 0, 0.4) 25%,
      		transparent 25%,
      		transparent 75%,
      		rgba(0, 0, 0, 0.4) 75%,
                rgba(0, 0, 0, 0.4) 100%
       );
       background-size: 20px 20px;
       
}

效果：

4.通過以上操作，發(fā)現基本實現了一半的效果，畢竟需求是方格，而不是三角形，那么每個格子只需要再來一個三角形即可，為了方便區(qū)分，另一個顏色先設置為red:

#app {
  width: 200px;
  height: 200px;
  background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.4) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    linear-gradient(
      45deg,
      red 25%,
      transparent 25%,
      transparent 75%,
      red 75%,
      red 100%
    );
}

效果：

5.可以看到，兩種漸變重疊在一起，這時候需要分別設置兩種漸變起始位置，使其分開，為了實現這個效果，將紅色漸變的起始位置向左、向下平移背景大小一半的距離：

#app {
  width: 200px;
  height: 200px;
  background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.4) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    linear-gradient(
      45deg,
      red 25%,
      transparent 25%,
      transparent 75%,
      red 75%,
      red 100%
    );
  background-position: 0 0, 100px 100px;
}

效果：

6.到此為止，已經實現我們需要效果了，接下來只需要將紅色設置為灰色，然后設置背景的大小，將背景平鋪即可，完整代碼如下：

#app {
  width: 200px;
  height: 200px;
  background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.4) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.4) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.4) 75%,
      rgba(0, 0, 0, 0.4) 100%
    );
    /* 背景大小必須小于盒子的大小 */
    background-size: 20px 20px;
    /* 第二種漸變的偏移必須為為背景大小的一半 */
    background-position: 0 0, 10px 10px;
}

效果：

至此，黑白格背景效果實現完畢。

到此這篇關于使用CSS實現黑白格背景效果的文章就介紹到這了,更多相關css黑白格背景內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

最新評論