css3 调图片透明度

CSS3是一款非常好的CSS版本，他不断的为我们带来更多的特性和新功能，如今我们要来探讨一下如何使用CSS3调整图片的透明度。

img {
    opacity:0.5;
}

通过设置opacity属性，我们可以改变图片的透明度。opacity属性能够接收一个0~1的值，0表示完全透明，1表示完全不透明。

除了opacity属性以外，CSS3还提供了一些其他的改变透明度的方式，比如rgba()和hsla()。两种方法非常相似，他们都可以使你改变一个颜色的透明度。而rgba()和hsla()唯一的差别是代表着使用不同的颜色格式。在rgba()中，代表着"红色，绿色，蓝色，透明度"，而在hsla()中，代表着"色相，饱和度，亮度，透明度"。

img {
    background-color: rgba(255, 255, 255, 0.3);
}
    

除了在图片上设置透明度以外，我们还可以在图片的背景上设置透明度。比如在下面的代码段中，我们设置了图片的背景颜色为白色，同时设置透明度为0.3，这样就会给图片添加一个半透明的效果。

总之，通过CSS3，我们可以轻松地制作出各种半透明图片，让网站的设计更加丰富。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！