CSS3不透明度實(shí)例講解
發(fā)布時(shí)間:2016-04-26 15:12:06 作者:佚名
我要評論

這篇文章主要為大家詳細(xì)介紹了CSS3不透明度實(shí)例,以設(shè)計(jì)燈箱廣告背景布的透明度為例,為大家介紹CSS3不透明度的調(diào)節(jié)方法,感興趣的小伙伴們可以參考一下
如何設(shè)置透明度?定義opacity屬性,通過設(shè)置該屬性能夠使任何元素呈現(xiàn)出半透明效果,opacity屬性的基本語法如下:
<alphavalue>|inherit
取值說明:
1、<alphavalue>|是由浮點(diǎn)數(shù)和單位標(biāo)識符組成的長度值。不可為負(fù)值,默認(rèn)值為1.opacity取值為1時(shí),則元素為完全不透明的;反之,取值為0時(shí),元素是完全透明的,不可見。
2、inherit表示繼承,即繼承父元素的不透明性。
3、針對IE瀏覽器,可以使用它的私有屬性filter來兼容:filter:alpha(alpha=value);。
實(shí)例:設(shè)計(jì)燈箱廣告背景布
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>opacity</title>
- <style type="text/css">
- body {
- margin:0;
- padding:0;
- }
- div { position:absolute; }
- .bg {
- width:100%;
- height:100%;
- background:#000;
- opacity:0.7;
- filter:alpha(opacity=70);
- }
- .lightbox {
- left:50px;
- top:50px;
- }
- </style>
- </head>
- <body>
- <div class="web"><img src="images/web_bg_9.jpg" width="1259" height="630" /></div>
- <div class="bg"></div>
- <div class="lightbox"><img src="images/web_bg_10.png" width="80%" /></div>
- </body>
演示效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
詳解CSS3的opacity屬性設(shè)置透明效果的用法
這篇文章主要介紹了詳解CSS3的opacity屬性設(shè)置透明效果的用法,同時(shí)還講到了opacity透明度帶有的繼承性影響子集元素的問題,值得初學(xué)者注意,需要的朋友可以參考下2016-05-09CSS3中使用RGBa來調(diào)節(jié)透明度的教程
這篇文章主要介紹了CSS3中使用RGBa來調(diào)節(jié)透明度的教程,RGBA是RGB色彩模型的一個(gè)擴(kuò)展,這個(gè)縮寫詞代表紅綠藍(lán)三原色的首字母,Alpha值代表顏色的透明度或者說不透明度,需要的朋2016-05-09CSS3實(shí)現(xiàn)透明白塊向上漂浮動畫特效源碼
CSS3實(shí)現(xiàn)透明白塊向上漂浮動畫特效源碼是一款半透明方塊向上飄動CSS3動畫效果,需要的朋友前來下載源碼2016-03-28- 這篇文章主要教大家使用css繪制透明三角形,css繪制三角形很簡單,如何繪制透明的三角形,本文為大家解決這個(gè)問題,感興趣的小伙伴們可以參考一下2016-03-10
- 這篇文章主要為大家詳細(xì)介紹了CSS鼠標(biāo)點(diǎn)擊改變圖片透明度,為大家提供改變圖片css透明度屬性的簡單方法,感興趣的小伙伴們可以參考一下2016-03-08
CSS3中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié)
這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié),其中通過text-stroke-color透明值的設(shè)置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下2016-03-07- 用來設(shè)定元素透明度的 Opacity 是CSS 3里的一個(gè)屬性。當(dāng)然現(xiàn)在還只有少部分瀏覽器支持,不過各個(gè)瀏覽器都有自己的私有屬性來支持,其中包括老版本的Mozilla和Safari2015-11-09
- 下面小編就為大家?guī)硪黄嫒葜髁鳛g覽器的CSS透明代碼(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-18