css 透明技術

2021-08-19 19:23:25 字數 1329 閱讀 7284

透明技術

實現透明常用的兩種方式有:

opacity:x,

x 的取值從

0 到 1,如

opacity: 0.8

rgba(red, green, blue, alpha),

alpha

的取值從

0 到 1,如

rgba(255,255,255,0.8)

設定opacity元素的所有後代元素會隨著一起具有透明性,一般用於調整或者模組的整體不透明度。

在background-color中使用

rgba

,標準瀏覽器中,背景透明,文字不透明。

注:opacity需要在

ie8以上版本才有效,為了相容,可用如下**:

opacity:0.9;filter:alpha(opacity=90)

;例項1:

opacity:0.9;/*透明

*/cursor:pointer;/*手型游標

*/結果:

例項2:

在上面的基礎上,新增乙個文字描述(半透明狀):

范冰冰.opacity{

width:228px;

height:304px;

background:#999;

margin:100px auto;

position:relative;

.opacity .fanbb{

/*文字水平居中

*/text-align:center;

/*背景顏色

*/background:#000;

color:#fff;

font-weight:500;

font-size:18px;

padding:1px 10px;

/*邊框為圓形

*/border-radius:15px;

position:absolute;

bottom:12px;

left:15px;

/*文字不受影響,只有背景透明

*/background:rgba(0,0,0,0.5);

效果:

css背景透明

css實現背景透明而文字不透明 平時我們所說的調整透明度,其實就是在樣式中調整不透明度,而實現透明的css方法通常有如下3中方式 css3的opacity x。x的取值為0到1,如opacity 0.5表示不透明度為50 css3的rgba red,green,blue,alpha alpha的取值...

css 實現透明效果

filter alpha opacity 50 moz opacity 0.5 khtml opacity 0.5 opacity 0.5 說明 opacity 0.5 這是最重要的,因為它是css標準.該屬性支援firefox,safari和 opera.filter alpha opacity ...

CSS透明屬性詳解

透明往往能產生不錯的網頁視覺效果,先奉上相容主流瀏覽器的css透明 transparent class上面的幾個屬性分別是 但css的透明屬性涉及到乙個繼承問題,當為父級元素設定透明度後,子元素將自動繼承其透明度,比如本站的乙個效果 即使你又為子元素指定透明度為1也是無效的。對於子元素是文字的情況,...