背景圖加上半透明遮罩

Posted on Edited on In

這一篇要介紹的是「背景圖加上半透明遮罩」的幾種方式

不管裝置有多寬，背景圖就是加上「半透明遮罩」

作法：

範例可看此 codepen
https://codepen.io/saffranwang/full/VwZPJyJ

🎃 使用多層background-image來製作

在background-image疊兩層

  • 第一層：linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5))

  • 第二層：url(https://i.ibb.co/zRd6Kbz/maria-teneva-PFVTZSq-Iqn0-unsplash.jpg)

html:

1
2
3
4
5
6
7
<!-- 左側圖片區塊 -->
 <div class="row">
     <div class="col-md-5 bg-cover" style="
         position: absolute; top: 0; bottom: 0;
         background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://i.ibb.co/zRd6Kbz/maria-teneva-PFVTZSq-Iqn0-unsplash.jpg)">    
     </div>        
 </div>

在「行動版」時，圖片才加上半透明遮罩

  • 當裝置寬度 >= 768px 時，圖片「沒有半透明遮罩」
  • 當裝置寬度 < 768px 時（行動版），圖片「才加上半透明遮罩」（加上遮罩是為了要提高文字的可讀性）

作法：可參考此 codepen
https://codepen.io/saffranwang/full/GRKrbwo

html 的部分

🎃 在「圖片區塊的.row」中，再新增一個<div class="col-md-5 bg-mask"></div>

  • .col-md-5 的作用是：遮罩跟背景圖一樣要佔 5 欄寬
  • .bg-mask 的作用是：當裝置寬度 < 768px 時（行動版），此 class 會被打開（圖片「才加上半透明遮罩」）

‼️ 注意！這個新增的div，一樣要加上「position: absolute; top: 0; bottom: 0;」

  • 如果沒加的話，這個div會沒有高度，遮罩也就看不到了

‼️ 這裡的「背景圖」和「半透明遮罩」（也就是兩個.col-md-5）為什麼可以“重疊在一起”？

原因是：

  • 兩個.col-md-5都有設定「絕對定位」

  • .col-md-5 設定為絕對定位後，會往外層找到「被設定為“相對定位”的.container-fluid」為基準來決定.col-md-5的位置

  • .col-md-5 就會脫離原本預設的版面配置，也就不會佔有空間

因此，兩個.col-md-5就可以重疊在一起了

html:

1
2
3
4
5
6
7
8
9
<!-- 左側圖片區塊 -->
<div class="row">
    <div class="col-md-5 bg-cover" style="
        position: absolute; top: 0; bottom: 0;
        background-image: url(https://i.ibb.co/zRd6Kbz/maria-teneva-PFVTZSq-Iqn0-unsplash.jpg)">    
    </div>
    <!-- 背景圖加上半透明遮罩（行動版時才加上） -->
    <div class="col-md-5 bg-mask" style="position: absolute; top: 0; bottom: 0;"></div>
</div>

css 的部分

🎃 用@media來寫，當裝置寬度 < 768px 時，會套用.bg-mask的樣式

css:

  • 遮罩作法一：使用background-image: linear-gradient()
1
2
3
4
5
6
/* 背景圖加上半透明遮罩（行動版時才加上） */
@media(max-width: 768px){
  .bg-mask{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
  }
}
  • 遮罩做法二：使用background-color
1
2
3
4
5
6
7
/* 背景圖加上半透明遮罩（行動版時才加上） */
@media(max-width: 768px){
  .bg-mask{
/*     background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); */
    background-color: rgba(0,0,0,0.5);
  }
}

這樣就完成了！

  • 當裝置寬度 >= 768px 時，圖片「沒有半透明遮罩」

  • 當裝置寬度 < 768px 時（行動版），圖片「才加上半透明遮罩」