圖片半透明效果如何用CSS實(shí)現(xiàn)

我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，見過(guò)有人將圖片做成變透明效果。這一效果我們可以通過(guò)圖象圖片軟件來(lái)實(shí)現(xiàn)。但如果圖片較多或者我們想在網(wǎng)頁(yè)中實(shí)現(xiàn)某種特殊效果，就只能用CSS來(lái)實(shí)現(xiàn)了。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供西山企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為西山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

其實(shí)這一效果用CSS來(lái)實(shí)現(xiàn)，也是非常簡(jiǎn)單的，只要一句代碼即可：

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?,

StartY=?, FinishX=?, FinishY=?)

這句代碼有什么具體的含義，如何使用呢？

（1）“Opacity”代表透明度水準(zhǔn)，范圍是0---100，其實(shí)就是百分比的意思，如果你想變?yōu)槿该?，那么就?代替Opacity后面的問(wèn)號(hào)吧。

（2）“FinishOpacity”就是用來(lái)指定結(jié)束時(shí)的透明度，范圍跟Opacity一樣（FinishOpacity為可選參數(shù)。

（3）“Style”是指定透明區(qū)域的形狀特征，0代表統(tǒng)一形狀，1代表線形，2代表放射形，3代表長(zhǎng)方形。

（4）“startX”與”startY”就是代表漸變效果開始的X與Y坐標(biāo)，（坐標(biāo)應(yīng)該知道是什么吧）一般我們?cè)O(shè)置為StartX=0, StartY=0（這樣就是表示的透明效果是從圖片的左上角開始的。）

（5）“FinishX”與“FinishY”當(dāng)然，這個(gè)就是代表漸變效果結(jié)束時(shí)的橫縱坐標(biāo)了，這里很關(guān)鍵，填什么數(shù)值那就要看你的圖片的高與寬了，假設(shè)我們的圖片高與寬分別是90、200像素，那么就可以寫成FinishX=200， FinishY=90。（如果你只想要一半的面積是透明，那么可以設(shè)置成FinishX=100， FinishY=50）

以上的效果可以實(shí)現(xiàn)

css怎么設(shè)置透明度

1、filter：對(duì)win IE設(shè)置半透明濾鏡效果，filter:alpha(Opacity=80)代表該對(duì)象80%半透明，火狐瀏覽器不認(rèn)

2、-moz-opacity：對(duì)mozilla firefox火狐瀏覽器實(shí)現(xiàn)半透明，win IE不認(rèn)此屬性，-moz-opacity:0.5相當(dāng)于設(shè)置半透明為50%

3、opacity：對(duì)除IE外所有瀏覽器支持包括谷歌，放最后主要針對(duì)谷歌瀏覽器，opacity: 0.5;表示設(shè)置50%半透明

為了觀察到對(duì)DIV半透明實(shí)現(xiàn)，我們?cè)O(shè)置兩個(gè)DIV層，分別一個(gè)放于另外一個(gè)DIV層內(nèi)，外層DIV命名為“.div-a”;上面被包含的層CSS類命名為“.div-b”，形成“.div-b”盒子放于“.div-a”內(nèi)

我們對(duì)底層DIV設(shè)置一個(gè)背景是一張圖片，上面的DIV盒子設(shè)置村黑色。

二、未設(shè)置半透明樣式實(shí)例 - TOP

1、根據(jù)描述實(shí)例，未設(shè)置半透明HTML源代碼：

!DOCTYPE html

html

head

meta charset="utf-8" /

title半透明實(shí)例在線演示 ;/title

style

.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;}

.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00}

/style

/head

body

div class="div-a"

div class="div-b"DIV半透明實(shí)例演示/div

/div

/body

/html

2、未設(shè)置半透明CSS樣式截圖：

未設(shè)置半透明時(shí)截圖

未設(shè)置半透明樣式 未實(shí)現(xiàn)半透明實(shí)例瀏覽器中效果截圖

三、對(duì)DIV設(shè)置CSS半透明樣式實(shí)例 - TOP

1、我們對(duì)“.div-b”選擇器加入半透明樣式代碼：

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;

設(shè)置60%半透明效果

完整實(shí)例網(wǎng)頁(yè)HTML代碼如下：

!DOCTYPE html

html

head

meta charset="utf-8" /

title半透明實(shí)例在線演示 ;/title

style

.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px}

.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00;

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6}

/* CSS注釋說(shuō)明：這里對(duì)CSS代碼換行是為了讓代碼在此我要中顯示完整，換行后CSS效果不受影響 */

/style

/head

body

div class="div-a"

div class="div-b"實(shí)現(xiàn)DIV半透明實(shí)例演示/div

/div

/body

/html

2、在瀏覽器效果截圖：

css div半透明實(shí)現(xiàn)截圖

css+div實(shí)現(xiàn)半透明 瀏覽器中瀏覽實(shí)現(xiàn)DIV半透明效果截圖

總結(jié)：根據(jù)以上兩個(gè)實(shí)例，第一個(gè)沒(méi)有設(shè)置半透明樣式，另外一個(gè)設(shè)置半透明樣式而實(shí)現(xiàn)了div層半透明效果，大家可以根據(jù)需要調(diào)整半透明值，實(shí)現(xiàn)想要半透明度。設(shè)置半透明效果要考慮IE瀏覽器、谷歌、火狐等瀏覽器兼容支持，所以我們半透明樣式代碼務(wù)必完整。

如何在css中設(shè)置半透明邊框

可以參考以下我的這個(gè)代碼：

XXX:{

border:

5px

solid

rgba(XXX,

XXX,

XXX,

0.5)

}

其中第一個(gè)XXX是你選擇的需要半透明的元素

接下來(lái)的XXX是你想要半透明的顏色

設(shè)置透明度為0.5就可以做到半透明了。

css設(shè)置背景半透明

首先，用大家比較熟悉的CSS屬性opacity來(lái)改變div的背景顏色。

描述：

外面大的div背景顏色為黃色，里面小的div的背景顏色為紅色，現(xiàn)在我們需要設(shè)置大的div的背景顏色變成半透明狀態(tài)，我們將opacity的屬性值設(shè)為0.5，代碼如下：

HTML部分：

1

2

3

我是內(nèi)容

CSS部分：

1

2

3

4

5

6

7

8

9

10

11

.aa{

width: 250px;

height: 250px;

background: yellow;

opacity: 0.5;

}

.bb{

width: 150px;

height: 150px;

background: red;

}

背景顏色的確變成了半透明，但是里面小div的背景以及文字都變成半透明了，這可能不是我們想要的效果，所以我們一般不使用這種方法。當(dāng)然了，如果在頁(yè)面布局時(shí)，你希望div里面所有的都變透明，就用opacity。

接下來(lái)我們用另一種方法，background-color:rgba(0,0,0,0~1)，使用這個(gè)方法就只會(huì)設(shè)置div背景透明，而不會(huì)影響到div里的內(nèi)容。

HTM部分一樣，只需要將opacity換成rgba即可。

代碼如下：

1

2

3

4

5

6

7

8

9

10

.aa{

width: 250px;

height: 250px;

background-color: rgba(255,255,0,0.5);

}

.bb{

width: 150px;

height: 150px;

background: red;

}

大的div透明度改變以后，對(duì)里面的背景和文字都沒(méi)有任何影響。所以我們一般用background-color:rgba(0,0,0,0~1)來(lái)設(shè)置背景顏色透明。

CSS 半透明遮罩層

很多時(shí)候，我們需要通過(guò)一層半透明的遮罩層來(lái)把后面的一切整體調(diào)暗，以便凸顯某個(gè)特定的UI元素，引導(dǎo)用戶關(guān)注，比如彈出層或者交互指南。

這個(gè)效果的傳統(tǒng)方法就是增加一個(gè)額外的HTML元素用于遮擋背景添加如下樣式：

.overlay 遮罩層負(fù)責(zé)把這個(gè)元素背后所有的東西調(diào)暗。 .lightbox 需要指定一個(gè)更高的 z-index ，一邊繪制在遮罩層的上層。這個(gè)方法的優(yōu)點(diǎn)：穩(wěn)定可靠，缺點(diǎn)：需要增加額外的HTML。那怎么由CSS單獨(dú)實(shí)現(xiàn)呢？

我們可以用偽元素消除額外的HTML元素，比如：

缺點(diǎn)： 移植性不好， body 元素上可能有其他需求已經(jīng)占用了 ::before 元素，而且使用這個(gè)效果需要JS 給body添加 dimmed 這個(gè)類，如果把遮罩層交給元素自己的 ::bofore 偽元素來(lái)實(shí)現(xiàn)，就可以彌補(bǔ)不足。給偽元素設(shè)置 z-index:-1; 就可以讓它出現(xiàn)在元素的背后。盡管這解決了可移植的問(wèn)題，但無(wú)法對(duì)遮罩層Z軸層次進(jìn)行細(xì)粒度的控制，它可能出現(xiàn)在這個(gè)元素之后（期望的），但也可能出現(xiàn)在這個(gè)元素的父元素活著祖先元素之后。這個(gè)方法還有一個(gè)問(wèn)題，偽元素?zé)o法綁定獨(dú)立的JS事件處理函數(shù)。

具體做法就是生成一個(gè)巨大的投影，不偏移不模糊，簡(jiǎn)單拙劣的模擬遮罩層效果：

為了確保遮罩層總是可以覆蓋視口，我們換用視口單位來(lái)解決它。因?yàn)槲覀儫o(wú)法分開制定的水平和垂直方向的直徑，所以這里最合適的視口單位為 vmax 。 1vmax 相當(dāng)于 1vw 和 1vh 兩者中較大值，因此滿足我們需求的最小值就是50vmax。由于投影是同時(shí)向四個(gè)方向擴(kuò)展的，這個(gè)遮罩層的最終尺寸將是100vmax加上元素本身的尺寸。

缺點(diǎn)： 如果頁(yè)面很長(zhǎng)而為此擴(kuò)大投影的擴(kuò)張半徑就不太明智。

優(yōu)點(diǎn)：可以有限度的使用該技巧，比如配合固定定位來(lái)使用，或者當(dāng)頁(yè)面沒(méi)有滾動(dòng)條時(shí)再用。

如果你想引導(dǎo)用戶關(guān)住的元素就是一個(gè)模擬的 dialog 元素，（ dialog 元素可以由它的 showModal() 方法顯示出來(lái)），那么根據(jù)瀏覽器的默認(rèn)樣式，它會(huì)自帶一個(gè)遮罩層。借助 ::backdrop 偽元素，這個(gè)原生的遮罩層可以設(shè)置樣式的，比如可以把它變的更暗一些：

缺點(diǎn)：瀏覽器對(duì)其支持比較有限，再次使用之前，確認(rèn)一下兼容性的問(wèn)題。

優(yōu)點(diǎn)：盡管瀏覽器還不支持，對(duì)話框沒(méi)有遮罩層也不會(huì)導(dǎo)致任何功能的缺失，因?yàn)樗皇怯脩趔w驗(yàn)的增強(qiáng)手段而已。

Css實(shí)現(xiàn)背景圖片半透明效果。

你的圖片跟第二個(gè)層在同一個(gè)層里，第二個(gè)層又是相對(duì)定位，當(dāng)然不行了。

style type="text/css"

.alpha{filter:alpha(opacity=30);width:400px;}

/style

div width="1024" height="768"

img src="C:\\webstudy\\Pic\\2.jpg" class="alpha"/

/div

div style=" position:absolute;left:0px; top:0px"

font color=redasdfasdfd/font

brbrbrbrsdfsdfsdfsdfsdfbrbrbr

/div

或者：

style type="text/css"

.alpha{filter:alpha(opacity=30);width:400px;}

/style

div style="position:relative" width="1024" height="768"

img src="My Pictures/q-1.jpg" class="alpha"/

div style="position:absolute;left:0px; top:0px"

font color=redasdfasdfd/font

brbrbrbrsdfsdfsdfsdfsdfbrbrbr

/div

/div

新聞標(biāo)題：css半透明樣式,css設(shè)置半透明
分享地址：http://www.sd-ha.com/article36/dscojsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、用戶體驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)、小程序開發(fā)、定制開發(fā)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)