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

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

10余年專(zhuān)注成都網(wǎng)站制作，成都企業(yè)網(wǎng)站建設(shè)，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專(zhuān)注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁(yè)制作,對(duì)廣告推廣等多個(gè)方面，擁有多年的營(yíng)銷(xiāo)推廣經(jīng)驗(yàn)。

描述：

外面大的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)用戶(hù)關(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è)類(lèi)，如果把遮罩層交給元素自己的 ::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ú)法分開(kāi)制定的水平和垂直方向的直徑，所以這里最合適的視口單位為 vmax 。 1vmax 相當(dāng)于 1vw 和 1vh 兩者中較大值，因此滿(mǎn)足我們需求的最小值就是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)用戶(hù)關(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)樗皇怯脩?hù)體驗(yàn)的增強(qiáng)手段而已。

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

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

XXX:{

border:

5px

solid

rgba(XXX,

XXX,

XXX,

0.5)

}

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

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

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

新聞名稱(chēng)：css半透明樣式,css設(shè)置背景半透明
轉(zhuǎn)載來(lái)源：http://chinadenli.net/article13/dsejcds.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、定制開(kāi)發(fā)、企業(yè)網(wǎng)站制作、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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)