CSS Image Opacity / Transparency
註：這是沒有一個CSS標準。然而，工程所有的現代瀏覽器，是一種部分的W3C的CSS 3的建議。
範例1 -建立一個透明映像
首先，我們將向您展示如何建立一個透明映像的CSS 。
經常圖片：
<img src="klematis.jpg" width="150" height="113" alt="klematis"style="opacity:0.4;filter:alpha(opacity=40)" />
例如2 -映像透明度-滑鼠放置的影響
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /><img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />我們看到，第一行的原始碼是類似的原始碼範例1 。此外，我們還增加了一個onmouseover屬性和onmouseout屬性。
onmouseover屬性的定義會發生什麼事時，滑鼠指標移動的形象。在這種情況下，我們要的形象不能是透明的當我們移動滑鼠指標超過它。
的文法這在Firefox是： this.style.opacity = 1和IE中的文法是： this.filters.alpha.opacity = 100 。
當滑鼠指標遠離的形象，我們希望的形象是透明的一次。這樣做是在onmouseout屬性。<html><head><style type="text/css">div.background { width: 500px; height: 250px; background: url(klematis.jpg) repeat; border: 2px solid black; }div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; }div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; }</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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
