模糊背景圖片(:before)

類似這樣的效果

• 之前

  
  

、

• 之后

重點注意:顏色的變化,之后的圖片相比之前的好像更暗淡一些

<div class="banner"></div>

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;
}