關於opacity的例項應用

2021-10-25 10:38:25 字數 1936 閱讀 9020

製作透明背景,凸顯文字內容(例項一)

天貓商品欄滑鼠移入透明度減低的效果(例項二)

type

="text/css"

>

*.autumn

.content

style

>

head

>

>

class

="autumn"

>

class

="content"

>

>

薄霧濃雲愁永晝,瑞腦銷金獸。佳節又重陽,玉枕紗廚,半夜涼初透。(廚 通:櫥;銷金獸 一作:消金獸)

東籬把酒黃昏後,有暗香盈袖。莫道不銷魂,簾捲西風,人比黃花瘦。p

>

>

薄霧瀰漫,雲層濃密,日子過得鬱悶愁煩,龍腦香在金獸香爐中繚嫋。又到了重陽佳節,臥在玉枕紗帳中,半夜的涼氣剛將全身浸透。

在東籬邊飲酒直到黃昏以後,淡淡的**清香溢滿雙袖。此時此地怎麼能不令人傷感呢?風乍起,捲簾而入,簾內的人兒因過度思念身形竟比那黃花還要瘦弱。p

>

div>

div>

body

>

效果

>

>

>

利用opacity製作透明的背景圖title

百草味零食大禮包網紅爆款休閒充飢夜宵

全新維達手帕紙超韌4層8張18包衛生紙巾

div>

class

="goodspri"

>

¥11.9

div>

div>

div>

body

>

html

>

效果

opacity屬性的應用

opacity是css中很有意思的屬性,類似於photoshop中不透明度的更改,結合絕對定位能實現很多漂亮的效果。opacity取值範圍為0 1,若實現對ie8 以及更早的版本的相容,一般寫為filter alpha opacity xx 當然其他geek會有更強大的寫法,本文不再贅述。從網頁設計...

filter alpha 與opacity的區別

filter alpha 與opacity都是用來設定透明度的,區別就在於相容性的問題,opacity支援高版本的瀏覽器,ie8以上不包含ie8.opacity 1.opacity的取值範圍在0到1之間,1代表完全不透明。filter alpha 1.filter alpha opacity 20 ...

1 關於opacity或RGBA設定顏色值

opacity宣告來設定元素的透明值 改透明度的值介於0 1之間的小數,0.5表示50 透明 opacity的特點是 當opacity設定元素的透明值,內部的文字及元素也會透明 demo注 這段 class為demo的標籤元素的透明值為30 裡面的文字及元素透明值也會變成30 rgba也是用來設定顏...