css中設置透明度的方法有哪些

發(fā)布時間：2020-09-26 11:38:33 來源：億速云閱讀：300 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關css中設置透明度的方法有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

本篇文章給大家介紹一下css中透明度的設置方法，下面我們就來看看具體的內容。

不透明度和透明度

根據(jù)定義，CSS中的不透明度和透明度定義了元素的可見性，無論是圖像，表格還是RGBA（紅綠藍alpha）顏色值。根據(jù)它們的意思，不透明度是元素不透明度或堅固度的度量，而透明度則衡量您可以輕松地看到它下面層中存在的內容。無論如何，它們以相同的方式工作 - 100％不透明意味著元素完全可見，而100％透明意味著它完全不可見。

您可以使用CSS，而不是使用昂貴的軟件來創(chuàng)建這些效果！通過幾個簡單的擊鍵，您可以立即更改頁面中元素的外觀，或者在某些情況下甚至可以更改鼠標指針懸停在其上時的反應。

不透明和透明的圖像

修改圖像時，opacity屬性接受0.0到1.0之間的值，后者作為默認值。因此，值越低，圖像變得越透明。

在下面的例子中，我們使用0.2,0.5和1.0進行并排比較：

css中設置透明度的方法有哪些

img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

注意：我們使用了filter屬性，因為Internet Explorer 8及更低版本的版本尚未識別opacity屬性。

透明的盒子和桌子

您可以使用opacity屬性為元素添加透明度，包括背景及其所有子元素。例如，在下面的框中（使用<div>，而不是<table>及其子元素），所有文本也變?yōu)橥该鳌?/p>

css中設置透明度的方法有哪些

文字也會推著背景顏色的透明而透明，如果這正是你想要實現(xiàn)的，則無需修改任何其他內容。你可以直接使用以下代碼來實現(xiàn)此效果：

div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}

使用RGBA實現(xiàn)透明度

但是，如果您只想更改背景，而文本或其他子元素將保持不透明，則可以使用RGBA繞過它。如果您習慣使用十六進制代碼，則可以了解在CSS中定義顏色的其他方法，即包括，RGB / RGBA和HSL / HSLA顏色。

RGBA代表紅綠藍alpha，alpha參數(shù)指定RGB顏色的不透明度。因此，使用RGBA顏色值，我們可以設置背景的不透明度，而文本保持黑色：

css中設置透明度的方法有哪些

在上面的例子中，我們使用了RGB值171,205,239，然后alpha參數(shù)定義了它的透明度或透明度。例如：

div { background：rgba（171,205,239,0.3）/ *藍色背景，不透明度為30％* / }

css透明背景圖片中的不透明文本

使用不透明度和透明度可以做的另一個非?？岬氖虑槭窃谕该骺蛑刑砑游谋荆赡苁菫榱说窒嬲缓线m或黑暗的背景圖像，如下面的示例所示。

css中設置透明度的方法有哪些

要創(chuàng)建這種簡單而有效的樣式，請使用<div>元素并將其類命名為“background”和“transbox”。第一類是背景圖像和邊框，而第二類是單獨的背景顏色和邊框。最后，使用段落添加文本。

首先，我們創(chuàng)建一個帶有背景圖像和邊框的<div>元素（class =“background”）。然后我們在第一個<div>中創(chuàng)建另一個<div>（class =“transbox”）。<div>元素具有背景顏色和邊框 - div是透明的。在透明的<div>中，我們在<p>元素中添加了一些文本。

以下是我們使用的代碼，您可以使用自己的圖像和文本進行修改和測試：

<html>
<head>
<style>
div.background {
background: url(green-tile.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is sample text placed in a transparent box.</p>
</div>
</div>
</body>
</html>

最后

不透明度和透明度有許多可能的用途，無論是純粹的審美還是強調網頁上的元素。它肯定是除了依靠Photoshop或其他照片編輯軟件為您完成所有這些的最便宜的替代方案！

關于css中設置透明度的方法有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

css中設置透明度的方法有哪些

猜你喜歡

最新資訊

相關推薦

相關標簽