css的高级用法

模糊背景图片(:before)

类似这样的效果

• 之前

  
  
  

、

• 之后

重点注意:颜色的变化,之后的图片相比之前的好像更暗淡一些

banner放置类似上面的图片

.banner{
    width: 800px;
    height: 400px;
    position: relative;
    background: url(图片路径) no-repeat;
    background-size: cover;
}

.banner:before{
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(images/overlay.png);
    position: absolute;
    opacity: 0.5;
}