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(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>