CSS 影象透明/不透明
使用CSS很容易建立透明的影象。
注意：CSS Opacity屬性是W3C的CSS3建議的一部分。
更多例項
建立透明影象 - 懸停效果
建立一個具有文字的擁有背景影象的透明框
例項1 - 建立一個透明影象
CSS3中屬性的透明度是 opacity。
首先，我們將向您展示如何用CSS建立一個透明影象。
正常的影象
相同的影象帶有透明度：
看看下面的CSS：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
IE9，Firefox，Chrome，Opera，和Safari瀏覽器使用透明度屬性可以將影象變的不透明。 Opacity屬性值從0.0 - 1.0。值越小，使得元素更加透明。
IE8和早期版本使用濾鏡：alpha（opacity= x）。 x可以採取的值是從0 - 100。較低的值，使得元素更加透明。
例項2 - 影象的透明度 - 懸停效果
將滑鼠移到影象上：
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 - 透明的盒子中的文字
這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。
原始碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background
{
width:500px;
height:250px;
background:url(https://www.itread01.com/images/klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* IE8 及更早版本 */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。這些文字在透明框裡。
</p>
</div>
</div>
</body>
</html>
首先，我們建立一個固定的高度和寬度的div元素，帶有一個背景圖片和邊框。然後我們在第一個div內部建立一個較小的div元素。 這個div也有一個固定的寬度，背景顏色，邊框 - 而且它是透明的。透明的div裡面，我們在P元素內部新增一些文字。