色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3如何讓圖片變灰

林玟書2年前14瀏覽0評論

CSS3提供了一種簡單的方法,可以將彩色圖片轉(zhuǎn)換為灰度圖像,可以通過以下代碼實現(xiàn):

img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

通過將filter屬性設(shè)置為grayscale(100%),可以將圖像變?yōu)橥耆疑U堊⒁猓?webkit-filter屬性也需要設(shè)置為相同的值,以便在Safari和Chrome等Webkit瀏覽器中使用。

如果您只想讓圖像的一部分變灰,也可以使用CSS3的透明度屬性。例如,以下代碼將圖像的頂部30%設(shè)置為灰度:

img {
height: 500px;
width: 800px;
position: relative;
}
img:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
background: url(your-image.jpg);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
z-index: 2;
}

在這個示例中,我們使用:before和:after偽元素將圖像的頂部30%覆蓋,并將:before元素的背景設(shè)置為50%不透明度的黑色。我們?nèi)缓笫褂?after來顯示完全灰色的圖像,從而模擬將圖像的頂部部分變灰。