2 yunzhonghe105 yunzhonghe105 于 2017.01.10 11:34 提问

CSS如何给图像设置透明度
css

图片说明

图片说明

如第一张图片,当鼠标指向是变成第二张图片的效果,而通过下图的代码只能是图片发白,上图的效果是怎么实现的?

图片说明

5个回答

qq_29594393
qq_29594393   Ds   Rxr 2017.01.10 11:54

这个是两个层,下面的还是原图没有变化。上面的是一个半透明的以黄色为背景的层 (一般是div 一类的)

qq_17079071
qq_17079071   2017.01.10 11:44

应该不是给图片设置透明度,是给一个块状元素设置了颜色和透明度吧。

qq_26787907
qq_26787907   2017.01.10 12:47

用CSS3的rgba颜色通道写

showbo
showbo   Ds   Rxr 2017.01.10 15:21

<style>
div.alpha{position:relative;display:inline-block}
div.alpha div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:orange;filter:alpha(opacity=80);opacity:.8;display:none}
div.alpha:hover div{display:block}
</style>
<div class="alpha"><img src="http://img.ask.csdn.net/upload/201701/10/1484019125_493549.jpg"><div></div></div>

文字应该也是独立的一个层,我这里直接用你图片了

ynjustme
ynjustme   2017.01.16 10:46

用background:rgba(0,0,0,0.5)设置透明度,图片文字互不影响

Csdn user default icon
上传中...
上传图片
插入图片