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

css實現圖片切塊消失

丁秀萍1年前7瀏覽0評論

CSS是一種前端樣式語言,通過CSS可以實現很多有趣的效果。其中之一就是圖片切塊消失效果。

具體實現方法如下:

<div class="box">
<img src="example.jpg" alt="example">
<div class="mask"></div>
</div>
.box {
position: relative;
}
.mask {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: white;
mix-blend-mode: difference;
}

首先需要在HTML中把圖片和一個遮蓋div都放入一個具有相對定位的容器中。然后在CSS中設置遮蓋層的定位和大小和背景色。

這里的關鍵在于mix-blend-mode屬性,它用于指定不同的混合模式。本例中使用的是difference混合模式,它會使得遮蓋層和圖片互相混合,產生看似消失的效果。

另外需要注意的是,這個效果只在支持mix-blend-mode屬性的瀏覽器中才能正常顯示。

上一篇div 不透明
下一篇div 劃橫線