欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

需求介紹

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

效果預(yù)覽

實(shí)現(xiàn)原理

1.利用漸變(background: linear-gradient())的效果來實(shí)現(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.然后設(shè)置背景大小，并且使其自動(dòng)平鋪填充background-repeat:repeat;, 因?yàn)槟J(rèn)就是平鋪，所以不用特地設(shè)置這個(gè)值，只需設(shè)置背景大小即可：

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

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

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

效果：

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

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

相關(guān)文章

最新評(píng)論