久違的教學文又來囉!!
今天要教大家一個簡單的CSS運用... 透明度!!

透明度的呈現雖然並不常用,
但用來增添一些小變化卻是非常方便...
例如滑鼠移至圖片或連結區塊時, 能有一些透明度的改變...
像是這樣(滑鼠移過去試試看...↓)

※非連結的hover(滑鼠移過)效果, 在IE6無法作用。

透明度的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架構表 也可以喔!!

themes 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • 千櫻.幻.絆
  • 我之前有用過 也有成功 但今天我改版圖 把這個語法加上去跟上次一樣的位置時
    透明度卻沒有顯示
  • 大阿姨 珍妮
  • 請問側邊欄位字體我想變大一點應該怎改呢
    這是我的格 http://lili0504.pixnet.net/blog/preview?ie8_stdmode=0
  • 您好

    請在側邊:自定樣式>css原始碼編輯,下方的編輯區域加上以下code
    #links{
    font-size:15px; /*請修改為您想要的大小*/
    }
    #links a{
    font-size:15px; /*請修改為您想要的大小*/
    }
    即可

    themes 於 2014/02/16 00:33 回覆

  • 小西 麻里
  • 想請問怎麼把 ''整個文章(字+圖)'' 變透明?
  • 您好,請把 .article的opacity設為0(請依照文章的參數設定)即可

    themes 於 2014/09/01 12:13 回覆

  • 小西 麻里
  • 能請問 參數設定 是什麼?
    是要在哪找?
  • 東台灣玩家Jason
  • 可以幫幫我嗎?
    頭痛欲裂!!
    真的~應該好好念書...

    我想要~下列的呈現!!
    ☆可是找不到(模板)在哪裡?

    所以說, 如果你想讓部落格中每篇文章的圖片都有點透明度,
    可以這麼寫...
    .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);}☆☆我想要~