css 图片的局部透明度 |css图片中间区域显示

img {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
img:hover {
opacity: 0.5;
}

如上所示的代码是为图片应用局部透明度的例子。首先，大家给图片设置好了默认的不透明度为1。然后，使用CSS的transition属性来添加渐变效果，使图片透明度改变时不至于显得突兀。最后，在:hover伪类中添加了透明度为0.5的样式，表示当鼠标悬浮在图片上时显示半透明效果。

需要注意的是，上述代码中的透明度属性值为0-1的浮点数。其中0表示完全透明，1表示完全不透明。也就是说，当大家将透明度设为0.5时，实际上是让图片的可见度降至50%。如果图片本身有白色或浅色背景，透明度过高的话可能会导致图片的边框或者背景颜色走形。

除了选中整张图片，大家也可以为图片的某一部分添加局部透明度，比如只让图片的边框或某一个元素透明度减低。这时需要使用CSS中的background-clip属性和backgroung-color属性。

.border {
background-color: rgba(255, 0, 0, 0.5);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 30px solid transparent;
}

如上所述代码，大家为图片的边框添加半透明效果。首先，大家设置了一个带有alpha通道的颜色，其中rgba的后三个属性分别是红色、绿色和蓝色的值，最后一个属性0.5表示50%的透明度。然后大家使用background-clip属性设置背景填充的区域，这里大家只填充边框内部的区域。最后，通过border属性将边框设置为透明，即可让边框内部的背景颜色透过边框漏出来，产生半透明效果。

总的来说，CSS中的局部透明度非常灵活和实用，能够大大提升网页的美感。无论是为整张图片设置透明度，还是只为部分元素添加透明效果，都可以根据具体需求自由操作。