css 图片局部透明 |css 漂亮切换按钮

img {
position: relative;
opacity: 1;
}
img:hover::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
z-index: 1;
}

通过上面这段CSS代码，大家可以让鼠标移到图片上面时，图片的某个区域变得半透明，实现局部透明的效果。

接下来，大家来解释一下这段代码的具体实现：

• 给图片设置了相对定位，从而让图片的子元素可以相对于它进行绝对定位。
• 设置初始的不透明度为1。
• 使用:hover伪类，将透明度逐渐地降低到0，实现局部透明的效果。
• 使用after伪元素，将半透明层添加到图片的上面。
• 设置半透明层的位置，大小和背景，从而使图片在被鼠标悬停时显示出半透明的效果。
• 将半透明层的层级设置为1，从而让半透明层显示在图片上面。

总之，使用CSS的图片局部透明效果可以让大家在给图片添加特效的时候更加灵活，让整个页面变得更加美观而生动。希望本文对大家有所帮助。