CSS 圖像透明/不透明

CSS 圖像透明/不透明

使用 CSS 很容易創(chuàng)建透明的圖像。

注意：CSS Opacity 屬性是W3C 的 CSS3 建議的一部分。

實例1 - 創(chuàng)建一個透明圖像

CSS3中屬性的透明度是 opacity.

首先，我們將向您展示如何用CSS創(chuàng)建一個透明圖像。

正常的圖像

相同的圖像帶有透明度：

看看下面的CSS：

img
{  opacity:0.4;  filter:alpha(opacity=40);  /*IE8 及更早版本 */  }

IE9，F(xiàn)irefox，Chrome，Opera，和 Safari 瀏覽器使用透明度屬性可以將圖像變的不透明。 Opacity 屬性值從0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用濾鏡：alpha（opacity= x）。 x可以采取的值是從0 - 100。較低的值，使得元素更加透明。

提示：在本站的 CSS 參考手冊中對 CSS opacity 屬性有詳細介紹。

實例2 - 圖像的透明度 - 懸停效果

將鼠標移到圖像上：

CSS樣式：

img:hover { opacity:1.0; filter:alpha(opacity=100); /*  IE8 及更早版本 */ }

第一個 CSS 塊是和例1中的代碼類似。此外，我們還增加了當用戶將鼠標懸停在其中一個圖像上時發(fā)生什么。在這種情況下，當用戶將鼠標懸停在圖像上時，我們希望圖片是清晰的。

此 CSS 是：opacity=1.

IE8 和更早版本使用： filter:alpha(opacity=100).

當鼠標指針遠離圖像時，圖像將重新具有透明度。

實例3 - 透明的盒子中的文字

首先，我們創(chuàng)建一個固定的高度和寬度的div元素，帶有一個背景圖片和邊框。然后我們在第一個 div 內(nèi)部創(chuàng)建一個較小的 div 元素。 這個 div 也有一個固定的寬度，背景顏色，邊框 - 而且它是透明的。透明的 div 里面，我們在 P 元素內(nèi)部添加一些文本。