CSS 半透明遮罩層

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

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括未央網(wǎng)站建設(shè)、未央網(wǎng)站制作、未央網(wǎng)頁制作以及未央網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，未央網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到未央省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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

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

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

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

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

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

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

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

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

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

首先，用大家比較熟悉的CSS屬性opacity來改變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)然了，如果在頁面布局時，你希望div里面所有的都變透明，就用opacity。

接下來我們用另一種方法，background-color:rgba(0,0,0,0~1)，使用這個方法就只會設(shè)置div背景透明，而不會影響到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透明度改變以后，對里面的背景和文字都沒有任何影響。所以我們一般用background-color:rgba(0,0,0,0~1)來設(shè)置背景顏色透明。

css透明度 css圖片透明度設(shè)置方法

在一些網(wǎng)站的登錄頁面上，經(jīng)常可以發(fā)現(xiàn)，一張圖片疊加在另一張圖片上，底層的圖片若隱若現(xiàn)，利用css中的透明屬性opacity可以實(shí)現(xiàn)這種效果，下面就簡單介紹一下怎么寫代碼

新建一個HTML文件，下載兩張圖片，如下圖，放在一個文件夾中，避免出現(xiàn)路徑問題

代碼示例如下，主要利用css偽元素::before，F(xiàn)_box為前置層，浮于背景上方

下面簡單分解下代碼，分為1，2，3，第一部分，設(shè)置背景圖片001.jpg；第三部分，固定前置層圖片002.jpg的位置；第二部分，利用偽元素：：before，設(shè)置屬性opacity來調(diào)節(jié)透明度，取值為0-1，0是全透明，即看不見的效果，1是全不透明

代碼示例中，設(shè)置opacity為0.5，半透明狀態(tài)，實(shí)際頁面效果如下

新聞名稱：css樣式半透明,css半透明樣式設(shè)計
當(dāng)前URL：http://chinadenli.net/article6/dsegiig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、做網(wǎng)站、面包屑導(dǎo)航、標(biāo)簽優(yōu)化

廣告

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