中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：CSS 圖片廊 下一篇：CSS 圖像拼合技術(shù)

CSS 圖像透明/不透明

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

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

Examples

更多實例

創(chuàng)建透明圖像 - 懸停效果

創(chuàng)建一個具有文本的擁有背景圖像的透明框

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

CSS3中屬性的透明度是 opacity。

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

正常的圖像

klematis

相同的圖像帶有透明度：

klematis

看看下面的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。較低的值，使得元素更加透明。

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

將鼠標(biāo)移到圖像上：

klematisklematis

CSS樣式：

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

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

此CSS是：opacity=1.

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

當(dāng)鼠標(biāo)指針遠離圖像時，圖像將重新具有透明度。

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

這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。

源代碼如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>
div.background { width:500px; height:250px; background:url(https://www.json.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>

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

上一篇：CSS 圖片廊 下一篇：CSS 圖像拼合技術(shù)