css3透明马赛克 |css3中nth child

.active {
background-image: url('example-image.jpg');
-webkit-mask-image: 
linear-gradient(
to bottom, 
rgba(0, 0, 0, 0.75) 0%, 
rgba(0, 0, 0, 0) 100%
),
url('example-image.jpg');
mask-image: 
linear-gradient(
to bottom, 
rgba(0, 0, 0, 0.75) 0%, 
rgba(0, 0, 0, 0) 100%
),
url('example-image.jpg');
}

这里的关键在于使用了 CSS3 的 Mask 属性。为了实现透明马赛克，大家需要使用两个值，一个是 RGBA 颜色，另一个则是图像的 URL。通过这两个值，大家可以实现透明马赛克的特效效果。

以上的代码中，-webkit-mask-image 属性用于给 WebKit 内核的浏览器提供支持，而 mask-image 则是给其他浏览器使用的。请确保你需要同时提供这两个属性，以便网页在所有浏览器中都能正常显示透明马赛克。同时，由于这里使用了两个图像，所以请确保它们都被正确地嵌入到页面当中。

透明马赛克是一种非常实用的技术，可以让大家在不破坏原始图像的情况下实现设计师想要的特效。如果你有需要处理图像的需求，透明马赛克绝对是一种值得一试的技术。