微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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 的特性,以确保兼容性。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。