您好,登錄后才能下訂單哦!
前段時(shí)間在開(kāi)發(fā)中,遇到需要給背景層加顏色遮罩的項(xiàng)目,現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法。
<div class="wrap1">
<div class="inner"> </div>
</div>
.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;
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n: 767273102 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻)
<div class="wrap2"></div>
.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;
}
<div class="wrap3"></div>
.wrap3 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n: 767273102 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻)
.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;
}
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。