詳解如何給背景圖片加顏色遮罩

zorpan 發布于2019-08-30 10:59 / 1260人閱讀

摘要：前段時間在開發中，遇到需要給背景層加顏色遮罩的項目，現在特定總結一下給背景圖層加顏色遮罩的方法。

前段時間在開發中，遇到需要給背景層加顏色遮罩的項目，現在特定總結一下給背景圖層加顏色遮罩的方法。

方法一：通過定位疊加(注意層級)

.wrap1 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: rgba(0, 0, 0, .5);
}

.wrap1 .inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(ban8.jpg) no-repeat center center;
    background-size: cover;
    z-index: -1;
}

方法二：通過偽類元素疊加

.wrap2 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) no-repeat center center;
    background-size: cover;
}

.wrap2::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 2;
}

方法三：CSS3顏色疊加background-blend-mode:multiply;(正片疊底)

.wrap3 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
    background-blend-mode: multiply;
}

拓展：背景模糊加顏色疊加

.wrap4 {
    position: relative;
    width: 1200px;
    height: 400px;
    background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
    background-blend-mode: multiply;
    filter: blur(2px);
    overflow: hidden;
}

如有問題歡迎大家討論指出，如有更好的方法，請不吝賜教，謝謝~~

云服務器 GPU云服務器給視頻加背景音樂 html給按鈕加背景 php 給圖片加屬性給圖片加文字的app

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114698.html

詳解如何給背景圖片加顏色遮罩

摘要：前段時間在開發中，遇到需要給背景層加顏色遮罩的項目，現在特定總結一下給背景圖層加顏色遮罩的方法。前段時間在開發中，遇到需要給背景層加顏色遮罩的項目，現在特定總結一下給背景圖層加顏色遮罩的方法。 showImg(https://segmentfault.com/img/bVbs6Hv?w=1216&h=417); 方法一：通過定位疊加(注意層級) .wrap1 { ...

xuexiangjys 2019-08-02 15:09 評論0 收藏0
mask-image的應用

摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。利用能做出一些不錯的效果，比如。想到用這個屬性正合適，于是要來了心型圖片，拿到設計師導出的文件，用壓縮下得到一個。遮罩層，如果學過Flash的同學應該都聽過，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。類似于現實世界中一張A4卡紙剪了個洞，我...

HollisChuang 2019-08-30 11:19 評論0 收藏0