css透明度的設(shè)置在網(wǎng)頁(yè)的設(shè)計(jì)中是經(jīng)常需要用到的，有時(shí)為了設(shè)計(jì)出的網(wǎng)頁(yè)更加的美觀(guān)，會(huì)對(duì)圖片進(jìn)行透明化處理，這樣網(wǎng)頁(yè)上面的內(nèi)容就不會(huì)看不見(jiàn)，有的網(wǎng)頁(yè)因?yàn)閳D片作為背景，也會(huì)更加美觀(guān)，那么，css中的透明度怎么設(shè)置呢？今天這篇文章就來(lái)給大家分享css中圖片透明度的設(shè)置方法。
css中與設(shè)置透明效果相關(guān)的屬性有兩個(gè)：opacity和rgba。（推薦視頻課程：HTML+CSS+JS+vue前端基礎(chǔ)入門(mén)~https://www.bilibili.com/video/av82371580）
下面我們就用這兩個(gè)屬性來(lái)分別設(shè)置圖片透明度的效果。
首先我們來(lái)看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="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
? ? </a>
</p>
效果如下：
注意：目前主流的瀏覽器都支持opacity:value寫(xiě)法，value取值為0-1，0為完全透明，1為完全不透明。但是在IE8及之前的版本中是不支持這種寫(xiě)法，那么我們可以通過(guò)濾鏡來(lái)解決
filter:alpha(opacity=value)，value取值為0-100，0為完全透明，100為完全不透明。就像上面例子那樣。
我們?cè)賮?lái)看看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);
效果如下：
說(shuō)明：此方法瀏覽器兼容性好，圖片和內(nèi)容都能很好分離實(shí)現(xiàn)背景圖片半透明效果，而文字、邊框等樣式與內(nèi)容不受影響。只是多了一層div，使用絕對(duì)定位樣式來(lái)實(shí)現(xiàn)重疊層疊。
設(shè)置背景顏色值與透明度。前3個(gè)255為代表RGB黑色，0.3代表透明度為30%。
最后，我們?cè)賮?lái)看一個(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);
}
效果如下：
以上就是css透明度怎么設(shè)置？三種css圖片透明度的設(shè)置方法的詳細(xì)內(nèi)容
更多學(xué)習(xí)內(nèi)容：我的學(xué)習(xí)交流群web前端學(xué)習(xí)交流群
