一个div,可以既给它一个背景图片,又给它设置一个rgba透明度吗?

prototype_eva
  • 1.1k

不能用opacity,因为要保证div里内容不受透明度影响

回复
阅读 5.9k
2 个回答

可以啊,设置了背景图片,再在背景图上覆盖一层半透明的背景

background:rgba(0,0,0,0.5) url(./img.jpg)
<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

or

<style>
article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}
</style>
<article>
  Text.
</article>

http://stackoverflow.com/questions/10422949/css-background-opacity

宣传栏