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

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

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

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

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

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

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

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

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

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

（4）“startX”與”startY”就是代表漸變效果開始的X與Y坐標，（坐標應該知道是什么吧）一般我們設置為StartX=0, StartY=0（這樣就是表示的透明效果是從圖片的左上角開始的。）

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

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

css怎么設置透明度

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

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

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

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

我們對底層DIV設置一個背景是一張圖片，上面的DIV盒子設置村黑色。

二、未設置半透明樣式實例 - TOP

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

!DOCTYPE html

html

head

meta charset="utf-8" /

title半透明實例在線演示 ;/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半透明實例演示/div

/div

/body

/html

2、未設置半透明CSS樣式截圖：

未設置半透明時截圖

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

三、對DIV設置CSS半透明樣式實例 - TOP

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

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

設置60%半透明效果

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

!DOCTYPE html

html

head

meta charset="utf-8" /

title半透明實例在線演示 ;/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注釋說明：這里對CSS代碼換行是為了讓代碼在此我要中顯示完整，換行后CSS效果不受影響 */

/style

/head

body

div class="div-a"

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

/div

/body

/html

2、在瀏覽器效果截圖：

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

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

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

如何在css中設置半透明邊框

可以參考以下我的這個代碼：

XXX:{

border:

5px

solid

rgba(XXX,

XXX,

XXX,

0.5)

}

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

接下來的XXX是你想要半透明的顏色

設置透明度為0.5就可以做到半透明了。

css設置背景半透明

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

描述：

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

HTML部分：

1

2

3

我是內容

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的背景以及文字都變成半透明了，這可能不是我們想要的效果，所以我們一般不使用這種方法。當然了，如果在頁面布局時，你希望div里面所有的都變透明，就用opacity。

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

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透明度改變以后，對里面的背景和文字都沒有任何影響。所以我們一般用background-color:rgba(0,0,0,0~1)來設置背景顏色透明。

CSS 半透明遮罩層

很多時候，我們需要通過一層半透明的遮罩層來把后面的一切整體調暗，以便凸顯某個特定的UI元素，引導用戶關注，比如彈出層或者交互指南。

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

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

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

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

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

為了確保遮罩層總是可以覆蓋視口，我們換用視口單位來解決它。因為我們無法分開制定的水平和垂直方向的直徑，所以這里最合適的視口單位為 vmax 。 1vmax 相當于 1vw 和 1vh 兩者中較大值，因此滿足我們需求的最小值就是50vmax。由于投影是同時向四個方向擴展的，這個遮罩層的最終尺寸將是100vmax加上元素本身的尺寸。

缺點： 如果頁面很長而為此擴大投影的擴張半徑就不太明智。

優(yōu)點：可以有限度的使用該技巧，比如配合固定定位來使用，或者當頁面沒有滾動條時再用。

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

缺點：瀏覽器對其支持比較有限，再次使用之前，確認一下兼容性的問題。

優(yōu)點：盡管瀏覽器還不支持，對話框沒有遮罩層也不會導致任何功能的缺失，因為它只是用戶體驗的增強手段而已。

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

你的圖片跟第二個層在同一個層里，第二個層又是相對定位，當然不行了。

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

新聞標題：css半透明樣式,css設置半透明
分享地址：http://m.rwnh.cn/article36/dscojsg.html

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

廣告

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