使用CSS很容易創(chuàng)建透明的圖像。
注意：CSS Opacity屬性是W3C的CSS3建議的一部分。
創(chuàng)建一個(gè)具有文本的擁有背景圖像的透明框
CSS3中屬性的透明度是 opacity.
首先，我們將向您展示如何用CSS創(chuàng)建一個(gè)透明圖像。
正常的圖像
相同的圖像帶有透明度：
看看下面的CSS：
IE9，F(xiàn)irefox，Chrome，Opera，和Safari瀏覽器使用透明度屬性可以將圖像變的不透明。 Opacity屬性值從0.0 - 1.0。值越小，使得元素更加透明。
IE8和早期版本使用濾鏡：alpha（opacity= x）。 x可以采取的值是從0 - 100。較低的值，使得元素更加透明。
將鼠標(biāo)移到圖像上：
CSS樣式：
第一個(gè)CSS塊是和例1中的代碼類似。此外，我們還增加了當(dāng)用戶將鼠標(biāo)懸停在其中一個(gè)圖像上時(shí)發(fā)生什么。在這種情況下，當(dāng)用戶將鼠標(biāo)懸停在圖像上時(shí)，我們希望圖片是清晰的。
此CSS是：opacity=1.
IE8和更早版本使用： filter:alpha(opacity=100).
當(dāng)鼠標(biāo)指針遠(yuǎn)離圖像時(shí)，圖像將重新具有透明度。
這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。
源代碼如下：
<html>
<head>
<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); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>首先，我們創(chuàng)建一個(gè)固定的高度和寬度的div元素，帶有一個(gè)背景圖片和邊框。然后我們?cè)诘谝粋€(gè)div內(nèi)部創(chuàng)建一個(gè)較小的div元素。 這個(gè)div也有一個(gè)固定的寬度，背景顏色，邊框 - 而且它是透明的。透明的div里面，我們?cè)赑元素內(nèi)部添加一些文本。
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
