使用CSS創建透明圖像很容易。
CSS的opacity屬性是CSS3建議的一部分。
示例1 - 創建一個透明圖像
透明度的CSS3屬性是opacity 。
首先，我們將告訴你如何使用CSS創建一個透明圖像。
常規圖像：
透明相同的圖像：
請看下面的CSS：
該opacity屬性可值0.0 - 1.0。 數值越低，越透明。
IE8和更早使用filter:alpha(opacity=x) 在x可以從值0 - 100。較低的值使元素更加透明。
示例2 - 圖像透明度 - 懸停效果
將鼠標移到圖片：
CSS的是這樣的：
例
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 */
}
試一試» 第一個CSS塊類似於示例中。此外，我們還增加當用戶將鼠標懸停在圖片中會發生什麼的代碼。 在這種情況下，我們希望圖像不是透明的，當用戶將鼠標懸停在它。 這種情況的CSS是opacity:1;
當鼠標指針從圖像移開，圖像將是透明的一次。
示例3 - 透明框文本
這是一些文字，被放置在透明框。
源代碼如下所示：
例
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
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.</p>
</div>
</div>
</body>
</html>
試一試» 首先，我們創建一個<div>元素(class="background")與背景圖像和邊框。 然後，我們創建另一個<div> (class="transbox")的第一個內部<div> 該<div class="transbox">有一個背景顏色，邊框-股利是透明的。 裡面的透明<div>我們增加了一個內部的一些文本<p>元素。