如何幫背景圖加上遮罩

作者: 發佈日期:

最近在工作上有一個需求，在登入頁面需要提供使用者更換底圖的功能，但是我們又無法控制使用者會換什麼圖片當底圖。

當使用者換上一組很亮或是內容很豐富的圖片，很容易讓整個畫面看起來就會很雜亂，甚至是看不到原本顯示在上面的文字。

經過討論後，認為幫底圖加上淡化效果應該可以解決這個問題。

最後找到的方法是同時設定底圖跟底色，然後設定背景混合是相乘模式，讓底色形成一種半透明遮罩的效果。

下面就來看怎麼達成這個效果吧！

Demo 圖片來源
Photo by Jeremy Bishop on Unsplash

加上背景混合之前

CSS

#img {
  background-image: url('https://images.unsplash.com/photo-1554830310-5b57379d04e6');
  background-size: cover;
  width: 500px;
  height: 333px;
}

看起來的樣子

file

加上背景混合之後

CSS

#img {
  background-image: url('https://images.unsplash.com/photo-1554830310-5b57379d04e6');
  background-size: cover;
  width: 500px;
  height: 333px;

  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: multiply;
}

看起來的樣子

file

參考資料
CSS：background-blend-mode 背景混合模式
CSS: 幫背景圖加上一層半透明顏色的遮罩

留言