CSS 圖像透明度 · W3School HTML & CSS 教程

# CSS 圖像透明度通過 CSS 創建透明圖像是很容易的。注釋：CSS opacity 屬性是 W3C CSS 推薦標準的一部分。 ## 親自試一試 - 實例 [創建透明圖像 - Hover 效果](/tiy/t.asp?f=css_image_transparency) ``` <!DOCTYPE html> <html> <head> <style> img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } </style> </head> <body> <h1>圖像透明度</h1> <img src="/i/tulip_peach_blossom_w_s.jpg" alt="Peach Blossom" /> <p><b>注釋：</b>在 IE 中，必須添加 <!DOCTYPE>，這樣才能將 :hover 選擇器用于除了 <a> 之外的其它元素。</p> </body> </html> ``` [創建文本在背景圖像上的透明框](/tiy/t.asp?f=css_transparency) ``` <!DOCTYPE html> <html> <head> <style> div.background { width: 400px; height: 266px; margin:15px; background: url('/i/tulip_peach_blossom_w.jpg') no-repeat; border: 1px solid black; } div.transbox { width: 338px; height: 204px; margin:30px; padding:0; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } div.transbox p { margin: 30px 40px; color: #000000; font:bold 12px Verdana, Geneva, sans-serif; line-height:1.5; } </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> ``` ## 實例 1 - 創建透明圖像定義透明效果的 CSS3 屬性是 _opacity_。首先，我們將展示如何通過 CSS 來創建透明圖像。常規圖像： ![Peach Blossom](https://box.kancloud.cn/2015-12-13_566d21c9047f6.jpg) 帶有透明度的相同圖像： ![Peach Blossom](https://box.kancloud.cn/2015-12-13_566d21c9047f6.jpg) 請看下面的 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 效果請把鼠標指針移動到圖像上： ![Peach Blossom](https://box.kancloud.cn/2015-12-13_566d21c9047f6.jpg) CSS 是這樣的： ``` 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 參考手冊：[CSS3 opacity 屬性](/cssref/pr_opacity.asp "CSS3 opacity 屬性")