久違的教學文又來囉!!
今天要教大家一個簡單的CSS運用... 透明度!!
透明度的呈現雖然並不常用,
但用來增添一些小變化卻是非常方便...
例如滑鼠移至圖片或連結區塊時, 能有一些透明度的改變...
像是這樣(滑鼠移過去試試看...↓)
透明度的CSS如下:
標準 / opacity:0~1 (Firefox 用此即可)
Mozilla 1.0~1.6 / -moz-opacity: 0~1
IE系列 / filter:alpha(opacity=0~100)
數值越小越透明...
所以說, 如果你想讓部落格中每篇文章的圖片都有點透明度,
可以這麼寫...
.article-content img{opacity:.5;-moz-opacity:.5;filter:alpha(opacity=50);}
如果還希望滑鼠移到上面才變清晰, 就再加上這一行...
.article-content img:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
以此類推...
大家都可以自行試試, 若有想在哪裡加上透明度又不知CSS怎麼寫,
歡迎提出來...小編會儘量解答...
或者自行對照部落格CSS架構表 也可以喔!!
今天要教大家一個簡單的CSS運用... 透明度!!
透明度的呈現雖然並不常用,
但用來增添一些小變化卻是非常方便...
例如滑鼠移至圖片或連結區塊時, 能有一些透明度的改變...
像是這樣(滑鼠移過去試試看...↓)
- 我是連結
- 我是區塊我是區塊我是區塊
透明度的CSS如下:
標準 / opacity:0~1 (Firefox 用此即可)
Mozilla 1.0~1.6 / -moz-opacity: 0~1
IE系列 / filter:alpha(opacity=0~100)
數值越小越透明...
- 無透明度
- 透明度 70%
- 透明度 50%
- 透明度 30%
所以說, 如果你想讓部落格中每篇文章的圖片都有點透明度,
可以這麼寫...
.article-content img{opacity:.5;-moz-opacity:.5;filter:alpha(opacity=50);}
如果還希望滑鼠移到上面才變清晰, 就再加上這一行...
.article-content img:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
以此類推...
大家都可以自行試試, 若有想在哪裡加上透明度又不知CSS怎麼寫,
歡迎提出來...小編會儘量解答...
或者自行對照部落格CSS架構表 也可以喔!!
全站熱搜