CSS 背景图片的透明度可以使用 rgba()
或者 opacity
属性来实现。
/* 使用 rgba() 实现背景图片透明度 */ background: rgba(255,255,0.5); /* 使用 opacity 实现背景图片透明度 */ opacity: 0.5;
其中,rgba()
函数的第四个参数为透明度,取值范围为 0-1。值越小,背景图片越透明。
而 opacity
属性的取值范围也为 0-1,同样越小背景图片越透明。
/* 如果有其他元素嵌套在背景图片下方,会同时受到透明度的影响 */ .parent { background: url(bg.jpg); opacity: 0.5; } .child { background: #fff; /* 因为 .parent 的透明度的影响,.child 也会被影响 */ }
需要注意的是,如果有其他元素嵌套在背景图片下方,会同时受到透明度属性的影响。
最后,需要注意的是要在实现背景图片透明度时,最好利用 CSS3 的特性,以确保兼容性。