半靈面包
09/29
2015

Css 背景图片透明度

css支持背景颜色的透明度（rbga形式），但是不支持背景图片的。不过通过css3的伪类元素，可以做个小hack实现。


element:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background-image: url(images/background.jpg);
  background-repeat: no-repeat;
  background-position: 100% 30%;
  background-attachment: fixed;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  z-index: -1;
}

原理：用after伪类添加一个大小相同的区块，设置背景，置于底层