css3中设置图片透明度

在 CSS3 中，可以使用opacity属性设置元素的不透明度，但这会将整个元素变为半透明或完全透明。如果想只让元素的背景或某个子元素透明，可以使用rgba()函数或background-color: rgba()属性。还可以使用 CSS3 的opacity属性和background-color属性同时设置不同的透明度值。

/* 使用 rgba() 函数设置背景透明度 */.container {
    background-color: rgba(255, 255, 255, 0.5);
}
/* 使用 background-color: rgba() 属性设置背景透明度 */.container {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
}
/* 使用 opacity 和 background-color 属性同时设置透明度 */.container {
    background-color: #fff;
    opacity: 0.5;
}
    

不过，这些方法只能在元素本身具有背景或是包含子元素时才有效。如果需要设置图片的透明度，可以在 HTML 中嵌套一层div> ，将图片作为该div> 的背景，然后设置该div> 的背景透明度，从而达到设置图片透明度的目的。

div class="img-container">
    img src="example.png" alt="example" class="image">
    /div>
.img-container {
    background-color: rgba(255, 255, 255, 0.5);
    display: inline-block;
}
.image {
    opacity: 1;
    width: 100%;
    height: auto;
    display: block;
}
    

上述代码中，将.img-container的背景颜色设置为半透明的白色，然后将图片作为.img-container的背景。最后，将图片的opacity属性设置为 1，以便避免影响图片的显示效果。

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