腳本之家服務器常用軟件

快捷導航

使用CSS實現(xiàn)黑白格背景效果

發(fā)布時間：2022-05-30 15:41:32 作者：水開泡茶

我要評論

在頁面上，有時會需要展示一些透明背景的圖片，為了展示其透明的背景，通常會像PS一樣，使用黑白相間的格子組成背景，從而告訴用戶，這是一張透明的圖片，本文給大家介紹使用CSS實現(xiàn)黑白格背景，感興趣的朋友一起看看吧

需求介紹

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

效果預覽

實現(xiàn)原理

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

<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.然后加以旋轉(zhuǎn)，使?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ā)現(xiàn)基本實現(xiàn)了一半的效果，畢竟需求是方格，而不是三角形，那么每個格子只需要再來一個三角形即可，為了方便區(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.可以看到，兩種漸變重疊在一起，這時候需要分別設置兩種漸變起始位置，使其分開，為了實現(xiàn)這個效果，將紅色漸變的起始位置向左、向下平移背景大小一半的距離：

#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.到此為止，已經(jīng)實現(xiàn)我們需要效果了，接下來只需要將紅色設置為灰色，然后設置背景的大小，將背景平鋪即可，完整代碼如下：

#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;
}

效果：

至此，黑白格背景效果實現(xiàn)完畢。

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

Tag：背景黑白 css

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

使用CSS實現(xiàn)黑白格背景效果

需求介紹

效果預覽

實現(xiàn)原理

相關文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容