資訊專欄INFORMATION COLUMN
摘要：前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法。
前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法。方法一：通過定位疊加(注意層級)
.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;
}
如有問題歡迎大家討論指出，如有更好的方法，請不吝賜教，謝謝~~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114698.html
摘要：前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法。 前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法。 showImg(https://segmentfault.com/img/bVbs6Hv?w=1216&h=417); 方法一：通過定位疊加(注意層級) .wrap1 { ...
摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。利用能做出一些不錯的效果，比如。想到用這個屬性正合適，于是要來了心型圖片，拿到設(shè)計師導(dǎo)出的文件，用壓縮下得到一個。 遮罩層，如果學(xué)過Flash的同學(xué)應(yīng)該都聽過，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。類似于現(xiàn)實(shí)世界中一張A4卡紙剪了個洞，我...
閱讀 4678·2021-09-26 09:55
閱讀 1447·2019-12-27 12:16
閱讀 924·2019-08-30 15:56
閱讀 1931·2019-08-30 14:05
閱讀 1018·2019-08-30 13:05
閱讀 1296·2019-08-30 10:59
閱讀 1486·2019-08-26 16:19
閱讀 1909·2019-08-26 13:47
