css3給背景圖片加顏色遮罩的方法
發(fā)布時間：2019-11-05 11:48:41 作者：佚名 
我要評論
我要評論前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結一下給背景圖層加顏色遮罩的方法，感興趣的朋友跟隨小編一起看看吧
前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結一下給背景圖層加顏色遮罩的方法。
方法一：通過定位疊加(注意層級)
<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;
}
方法二：通過偽類元素疊加
<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;
}
方法三：CSS3顏色疊加background-blend-mode:multiply;(正片疊底)
<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;
}
拓展：背景模糊加顏色疊加
.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;
}
總結
以上所述是小編給大家介紹的css3給背景圖片加顏色遮罩的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
- 這篇文章主要介紹了css3實現(xiàn)背景圖片顏色修改的多種方式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2021-04-13
CSS3 菱形拼圖實現(xiàn)只旋轉div 背景圖片不旋轉功能
這篇文章主要介紹了CSS3 菱形拼圖實現(xiàn)只旋轉div 背景圖片不旋轉功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-29- 這篇文章主要介紹了CSS3只讓背景圖片旋轉180度的實現(xiàn)示例。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2021-03-09
css3實現(xiàn)一個div設置多張背景圖片及background-image屬性實例演示
這篇文章主要介紹了css3實現(xiàn)一個div設置多張背景圖片及background-image屬性,同時對于css3背景漸變也做了詳細的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下2017-08-10CSS的background屬性及CSS3的背景圖片設置總結
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設置總結,背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13- 這篇文章主要介紹了CSS3對背景圖片的裁剪及尺寸和位置的設定方法,在IE瀏覽器中要注意一下兼容性,需要的朋友可以參考下2016-03-07
- CSS背景動畫很長時間以來都是一個熱門話題，很多時候都是因為效果特別絢麗，而且不需要額外的技術。最近有人問我是否可以給頁面上一個指定的元素安排多重背景動畫，答案是y2014-04-04
- 使用css3 屬性：background-size可以輕松實現(xiàn)像桌面壁紙一樣拉伸，下面為大家詳細介紹下具體的相關實現(xiàn)過程，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-19
css3背景圖片透明疊加屬性cross-fade簡介及用法實例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性，一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08- 背景圖片/紋理有很多種使用方式，常常用于為添加網(wǎng)站的最佳的界面美化?，F(xiàn)在它在CSS3中被重視，我們可以應用多背景圖和背景圖片尺寸來實現(xiàn)更完美的效果,需要的朋友可以了解2012-12-19
