這篇文章將為大家詳細(xì)講解有關(guān)css中設(shè)置透明度的方法有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),猇亭企業(yè)網(wǎng)站建設(shè),猇亭品牌網(wǎng)站建設(shè),網(wǎng)站定制,猇亭網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,猇亭網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
本篇文章給大家介紹一下css中透明度的設(shè)置方法，下面我們就來看看具體的內(nèi)容。
不透明度和透明度
根據(jù)定義，CSS中的不透明度和透明度定義了元素的可見性，無論是圖像，表格還是RGBA（紅綠藍(lán)alpha）顏色值。根據(jù)它們的意思，不透明度是元素不透明度或堅(jiān)固度的度量，而透明度則衡量您可以輕松地看到它下面層中存在的內(nèi)容。無論如何，它們以相同的方式工作 - 100％不透明意味著元素完全可見，而100％透明意味著它完全不可見。
您可以使用CSS，而不是使用昂貴的軟件來創(chuàng)建這些效果！通過幾個(gè)簡單的擊鍵，您可以立即更改頁面中元素的外觀，或者在某些情況下甚至可以更改鼠標(biāo)指針懸停在其上時(shí)的反應(yīng)。
不透明和透明的圖像
修改圖像時(shí)，opacity屬性接受0.0到1.0之間的值，后者作為默認(rèn)值。因此，值越低，圖像變得越透明。
在下面的例子中，我們使用0.2,0.5和1.0進(jìn)行并排比較：
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}注意：我們使用了filter屬性，因?yàn)镮nternet Explorer 8及更低版本的版本尚未識別opacity屬性。
透明的盒子和桌子
您可以使用opacity屬性為元素添加透明度，包括背景及其所有子元素。例如，在下面的框中（使用
，而不是
及其子元素），所有文本也變?yōu)橥该鳌?/p>
文字也會推著背景顏色的透明而透明，如果這正是你想要實(shí)現(xiàn)的，則無需修改任何其他內(nèi)容。你可以直接使用以下代碼來實(shí)現(xiàn)此效果：
div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}使用RGBA實(shí)現(xiàn)透明度
但是，如果您只想更改背景，而文本或其他子元素將保持不透明，則可以使用RGBA繞過它。如果您習(xí)慣使用十六進(jìn)制代碼，則可以了解在CSS中定義顏色的其他方法，即包括，RGB / RGBA和HSL / HSLA顏色。
RGBA代表紅綠藍(lán)alpha，alpha參數(shù)指定RGB顏色的不透明度。因此，使用RGBA顏色值，我們可以設(shè)置背景的不透明度，而文本保持黑色：
在上面的例子中，我們使用了RGB值171,205,239，然后alpha參數(shù)定義了它的透明度或透明度。例如：
div { background：rgba（171,205,239,0.3）/ *藍(lán)色背景，不透明度為30％* / }css透明背景圖片中的不透明文本
使用不透明度和透明度可以做的另一個(gè)非?？岬氖虑槭窃谕该骺蛑刑砑游谋?，可能是為了抵消真正不合適或黑暗的背景圖像，如下面的示例所示。
要?jiǎng)?chuàng)建這種簡單而有效的樣式，請使用
元素并將其類命名為“background”和“transbox”。第一類是背景圖像和邊框，而第二類是單獨(dú)的背景顏色和邊框。最后，使用段落添加文本。
首先，我們創(chuàng)建一個(gè)帶有背景圖像和邊框的
元素（class =“background”）。然后我們在第一個(gè)
中創(chuàng)建另一個(gè)
（class =“transbox”）。
元素具有背景顏色和邊框 - div是透明的。在透明的
中，我們在
元素中添加了一些文本。
以下是我們使用的代碼，您可以使用自己的圖像和文本進(jìn)行修改和測試：
This is sample text placed in a transparent box.
最后
不透明度和透明度有許多可能的用途，無論是純粹的審美還是強(qiáng)調(diào)網(wǎng)頁上的元素。它肯定是除了依靠Photoshop或其他照片編輯軟件為您完成所有這些的最便宜的替代方案！
關(guān)于css中設(shè)置透明度的方法有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
文章名稱：css中設(shè)置透明度的方法有哪些
標(biāo)題路徑：
http://weahome.cn/article/pcdech.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
