css 背景图片的透明度

CSS 背景图片的透明度可以使用 rgba() 或者 opacity 属性来实现。

/* 使用 rgba() 实现背景图片透明度 */
background: rgba(255,255,0.5);

/* 使用 opacity 实现背景图片透明度 */
opacity: 0.5;

css 背景图片的透明度

其中,rgba() 函数的第四个参数为透明度,取值范围为 0-1。值越小,背景图片越透明。

opacity 属性的取值范围也为 0-1,同样越小背景图片越透明。

/* 如果有其他元素嵌套在背景图片下方,会同时受到透明度的影响 */
.parent {
   background: url(bg.jpg);
   opacity: 0.5;
}

.child {
   background: #fff;
   /* 因为 .parent 的透明度的影响,.child 也会被影响 */
}

需要注意的是,如果有其他元素嵌套在背景图片下方,会同时受到透明度属性的影响。

最后,需要注意的是要在实现背景图片透明度时,最好利用 CSS3 的特性,以确保兼容性。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效