css给图片加个黑透 |后盾网divcss

/* CSS代码 */
img {
opacity: 0.5;/* 控制图片透明度 */
filter: grayscale(100%);/* 使图片变成黑白 */
}
img:hover {
opacity: 1;/* 鼠标悬停时使图片完全显示 */
filter: grayscale(0%);/* 去除黑白效果 */
}

在上面的CSS代码中，大家首先设置图片的透明度为0.5以及将图片过滤为黑白。当鼠标悬停在图片上时，大家通过:hover伪类将图片的透明度设置为1同时去掉黑白效果，即让原色呈现。

除了以上技巧，大家还可以使用CSS3中的linear-gradient属性给图片添加渐变的遮罩层。具体代码如下：

/* CSS代码 */
img {
position: relative;/* 控制父元素定位 */
}
img:after {
content: ''；
position: absolute;/* 给遮罩层绝对定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));/* 遮罩层渐变样式 */
opacity: 0;/* 初始透明度为0表示完全不透明 */
transition: opacity 0.3s ease-in-out;/* 控制遮罩层渐变的过度 */
}
img:hover:after {
opacity: 1;/* 鼠标悬停时，遮罩层完全显示 */
}

请注意，大家在这个方法中首先让img元素的position属性为relative以便于给它的后代元素做绝对定位。大家给遮罩层设置了绝对定位，并设置了top、left、right、bottom等属性值为0，使得遮罩层与图片完全契合。

然后大家设置了一个渐变的遮罩层，使用transition属性来控制遮罩层不透明度变化的顺滑过渡，当鼠标悬停在图片上时，将遮罩层透明度改为1，使其完全显示。

无论是在图片上加透明度，还是添加遮罩层，CSS都为大家提供了非常方便的方法来实现这个效果。可以让大家在web设计中更加自由地表达自己的创意码。