通過css使用background-color為背景圖添加遮罩效果的兩種方法
發(fā)布時間:2018-07-12 15:48:23 作者:佚名
我要評論

這篇文章主要介紹了通過css使用background-color為背景圖添加遮罩效果的兩種方法,需要的朋友可以參考下
一個div同時設(shè)置background-color和background-image的話,color是處于img層下方的,無法實現(xiàn)遮罩效果,所以需要再創(chuàng)建一個div作為其子div,然后設(shè)置子div的背景顏色,介紹兩種方法:
第一種,代碼如下:
css:
.wrap{ position: relative; background: url(i/pic4.jpg) no-repeat; -webkit-background-size: 100%; background-size: 100%; } .warp-mask{ height:100%; width:100%; background: rgba(0,0,0,.4); }
html:
<div class="wrap"> <div class="wrap-mask"></div> </div>
第二種,通過after偽元素設(shè)置,代碼如下:
css:
.wrap{ position: relative; background: url(i/pic4.jpg) no-repeat; -webkit-background-size: 100%; background-size: 100%; } .wrap-mask:after{ position: absolute; top: 0; left: 0; content: ""; background-color: yellow; opacity: 0.2; z-index: 1; width: 100%; height: 100%; }
html:
<div class="wrap"> <div class="wrap-mask"></div> </div>
總結(jié)
以上所述是小編給大家介紹的通過css使用background-color為背景圖添加遮罩效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
- 這篇文章主要為大家介紹了CSS實現(xiàn)同一行的圖片和文字垂直居中對齊的方法,涉及css中vertical-align:middle屬性的使用技巧,需要的朋友可以參考下2015-05-12
- 在文字旁邊加上一個圖標(biāo),通過css如何解決文字與圖片不能水平居中對齊的問題,下面有個示例,大家可以參考下2014-05-31
- 垂直居中對齊在網(wǎng)頁布局中非常實用,下面有段css代碼,個人感覺還不錯,大家可以參考下2014-02-08
- 如何讓input輸入框與img在同一行居中對齊,由于經(jīng)常會使用到,默認(rèn)情況下將input和img放同一行,img標(biāo)簽總是比input高出一個頭,很難看,大家可以參考下本文或許有所幫助2013-10-09
SCSS移動端頁面遮罩層效果的實現(xiàn)及常見問題解決
這篇文章主要介紹了SCSS移動端頁面遮罩層效果的實現(xiàn)及常見問題解決,使用CSS的預(yù)處理器框架SCSS寫起來比原生CSS會來得更加簡便一些,需要的朋友可以參考下2016-06-09- 本文通過實例代碼給大家介紹了css遮罩全屏居中對齊的實現(xiàn)方式,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-07-16