您好,登錄后才能下訂單哦!
這篇文章主要介紹設(shè)置css圖片透明度的方法有哪些,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
css中與設(shè)置透明效果相關(guān)的屬性有兩個(gè):opacity和rgba。
下面我們就用這兩個(gè)屬性來分別設(shè)置圖片透明度的效果。
首先我們來看css中opacity屬性設(shè)置圖片透明度的例子
css:
.opacity1, .opacity2, .opacity_img { display: inline-block; } .opacity1 { filter: Alpha(opacity=0); } .opacity2 { filter: Alpha(opacity=50); } .opacity_img { filter: Alpha(opacity=100); } :root .opacity1 { opacity: 0; filter: none; } :root .opacity2 { opacity: .5; filter: none; } :root .opacity_img { opacity: 1; filter: none; }
html:
<p> <a href="#" class="opacity2"> <img class="opacity_img" src=" " /> </a> </p> <p> <a href="#" class="opacity2"> <img class="opacity2" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> </a> </p>
效果如下:
注意:目前主流的瀏覽器都支持opacity:value寫法,value取值為0-1,0為完全透明,1為完全不透明。但是在IE8及之前的版本中是不支持這種寫法,那么我們可以通過濾鏡來解決 filter:alpha(opacity=value),value取值為0-100,0為完全透明,100為完全不透明。就像上面例子那樣。
我們再來看看css中rgba設(shè)置圖片透明的例子:
html:
<div class="demo2-bg"> <div class="demo2">背景圖半透明,文字不透明<br />方法:定位+ background:rgba(255,255,255,0.3)</div> </div>
css:
.demo2-bg{ background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat; background-size: cover; width: 500px; height: 300px; position: relative; } .demo2{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 500px; height: 300px; line-height: 50px; text-align: center; background:rgba(255,255,255,0.3);
效果如下:
說明:此方法瀏覽器兼容性好,圖片和內(nèi)容都能很好分離實(shí)現(xiàn)背景圖片半透明效果,而文字、邊框等樣式與內(nèi)容不受影響。只是多了一層div,使用絕對定位樣式來實(shí)現(xiàn)重疊層疊。
設(shè)置背景顏色值與透明度。前3個(gè)255為代表RGB黑色,0.3代表透明度為30%。
最后,我們再來看一個(gè)圖片毛玻璃效果的設(shè)置方法:
<div class="demo1">背景圖半透明,文字不透明<br />方法:背景圖+ filter:blur</div>
.demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:before{ background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat; background-size: cover; width: 500px; height: 300px; content: ""; position: absolute; top: 0; left: 0; z-index: -1;/*-1 可以當(dāng)背景*/ -webkit-filter: blur(3px); filter: blur(3px); }
效果如下:
以上是設(shè)置css圖片透明度的方法有哪些的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。