css img不透明度的設定方法：先建立一個HTML和css範例檔案；然後透過給指定img設定樣式為「img{opacity:0.4;filter:alpha(opacity=40);}」即可。
本教學操作環境：Windows7系統、HTML5&&CSS3版本，此方法適用於所有品牌電腦。
推薦：《css影片教學》
透過 CSS 建立透明圖片是很容易的。
註解：CSS opacity 屬性是 W3C CSS 推薦標準的一部分。
建立透明圖像 - Hover 效果
在本例中，當使用者將滑鼠指標移到圖片上時，會改變圖片的透明度。
建立文字在背景圖像上的透明框
本範例建立了一個包圍文字的半透明框。
實例 1 - 建立透明圖片
定義透明效果的 CSS3 屬性是 opacity。
首先，我們將展示如何透過 CSS 來建立透明圖片。
常規圖片：
具有透明度的相同圖片：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}IE9, Firefox, Chrome, Opera 和Safari 使用屬性opacity 來設定透明度。 opacity 屬性能夠設定的值從 0.0 到 1.0。值越小，越透明。 IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。 x 能夠取的值從 0 到 100。值越小，越透明。 實例2 - 影像透明度- Hover 效果請把滑鼠指標移到影像上：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}第一個CSS 程式碼區塊類似實例1 中的程式碼。此外，我們已經設定了當滑鼠指標位於圖像上時的樣式。在這個例子中，當指標移動到影像上時，我們希望影像是不透明的。 對應的 CSS 是：opacity=1。 IE8 以及更早的瀏覽器：filter:alpha(opacity=100)。 當滑鼠指標移出影像後，影像會再次透明。 實例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.
<!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>首先，我們建立一個div 元素(class="background")，它有固定的高度和寬度、背景影像，以及邊框。然後我們在第一個 div 內建立稍小的 div (class="transbox")。 "transbox" div 有固定的寬度、背景色和邊框 - 且它是透明的。在透明 div 內部，我們在 p 元素中加入了一些文字。 以上是css img不透明度如何設置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PMGoofonts是由開發人員和設計師丈夫簽名的附帶項目，它們都是版式的忠實擁護者。我們一直在標記Google
使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API！碰巧的是，我得到了完美的
將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時，它被稱為Motion-Path，然後被更名。我
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
SublimeText3漢化版
中文版，非常好用
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
