寫在前面的話：
在實際應用中，我們常常遇到背景圖片與顏色疊加效果的設計圖，如以下效果的：
這個我試過：
background：URL();
background-color: rgba( );
只要 color 寫在后面是可以實現的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .wrap{ color:red; width: 300px; height: 150px; border: 1px solid red; /*加上邊框方便看效果*/ margin: 2px auto 0; /*讓div居中*/ display: inline-block; background: url(./1.png) no-repeat center; /*背景圖不重復，並在div居中*/ } .box1{background-color: yellow;} .box2{background-color: rgba(255,255,0,0.2);} .box3{background-color: yellow; background: url(./1.png) no-repeat center;} .box4{background-color: rgba(255,255,0,0.2); background: url(./1.png) no-repeat center;} </style> <body> <div class="wrap">只加了背景圖的對比</div> <div class="wrap">只加了背景圖的對比</div> <div class="wrap">只加了背景圖的對比</div> <div class="wrap">只加了背景圖的對比</div> <div class="wrap box1">加上不透明的顏色</div> <div class="wrap box2">加上透明顏色</div> <div class="wrap box3">加上不透明的顏色再加上圖片</div> <div class="wrap box4">加上透明的顏色再加上圖片</div> </body> </html>
效果圖：
上圖表示，直接給要實現效果的容器加是可以的，當然加上 blur(10px) 也是可以的，但是如果要在該容器添加上內容，那么加了blur 的話，內容根本無法看清楚~
所以采用了教學視頻中的方法（使用兩層，一層填充內容並且加上背景色，另一層采用絕對定位的方式，放入圖片，並設置blur值即可）：
做法：
將圖片以img標簽的形式放在一個div中，此div與需要設置背景圖片的容器應該同樣大小
然后給這個div設置：
position:absolute; top:0; left:0; //同時將那個需要設置背景圖片的容器設置 position: relative;
z-index:-1; //可將圖片置底
filter:blur(10px); //圖片的模糊效果,具體給多少像素請參考設計稿~
over-flow: hidden; //以免這個圖片的模糊擴散至其他的元素~
顏色背景的話呢，為那個容器正常設置就好了~
視頻中的實例：
額，后補~