溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css中img不透明度的設(shè)置方法

發(fā)布時間：2020-12-22 09:17:56 來源：億速云 閱讀：195 作者：小新 欄目：web開發(fā)

這篇文章主要介紹css中img不透明度的設(shè)置方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

css img不透明度的設(shè)置方法：首先創(chuàng)建一個HTML和css示例文件；然后通過給指定img設(shè)置樣式為“img{opacity:0.4;filter:alpha(opacity=40);}”即可。

通過 CSS 創(chuàng)建透明圖像是很容易的。

注釋：CSS opacity 屬性是 W3C CSS 推薦標(biāo)準(zhǔn)的一部分。

創(chuàng)建透明圖像 - Hover 效果

在本例中，當(dāng)用戶將鼠標(biāo)指針移動到圖片上時，會改變圖片的透明度。

創(chuàng)建文本在背景圖像上的透明框

本例創(chuàng)建了一個包圍文本的半透明框。

實例 1 - 創(chuàng)建透明圖像

定義透明效果的 CSS3 屬性是 opacity。

首先，我們將展示如何通過 CSS 來創(chuàng)建透明圖像。

常規(guī)圖像：

css中img不透明度的設(shè)置方法

帶有透明度的相同圖像：

css中img不透明度的設(shè)置方法

請看下面的 CSS：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
}

IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設(shè)定透明度。opacity 屬性能夠設(shè)置的值從 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。

實例 2 - 圖像透明度 - Hover 效果

請把鼠標(biāo)指針移動到圖像上：

css中img不透明度的設(shè)置方法

CSS 是這樣的：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 針對 IE8 以及更早的版本 */
}

第一個 CSS 代碼塊類似實例 1 中的代碼。此外，我們已經(jīng)設(shè)置了當(dāng)鼠標(biāo)指針位于圖像上時的樣式。在這個例子中，當(dāng)指針移動到圖像上時，我們希望圖像是不透明的。

對應(yīng)的 CSS 是：opacity=1。

IE8 以及更早的瀏覽器：filter:alpha(opacity=100)。

當(dāng)鼠標(biāo)指針移出圖像后，圖像會再次透明。

實例 3 - 透明框中的文本

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

css中img不透明度的設(shè)置方法

源代碼是這樣的：

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  width: 400px;
  height: 266px;
  background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
  border: 1px solid black;
}
div.transbox
{
  width: 338px;
  height: 204px;
  margin:30px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}
div.transbox p
{
  margin: 30px 40px;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>

首先，我們創(chuàng)建一個 div 元素 (class="background")，它有固定的高度和寬度、背景圖像，以及邊框。然后我們在第一個 div 內(nèi)創(chuàng)建稍小的 div (class="transbox")。"transbox" div 有固定的寬度、背景色和邊框 - 并且它是透明的。在透明 div 內(nèi)部，我們在 p 元素中加入了一些文本。

以上是“css中img不透明度的設(shè)置方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手