#alpha-teaching ul{overflow:hidden;_overflow:none;_height:1%}
#alpha-teaching ul li{float:left; width:110px;}
#alpha-teaching ul li img{display:block;}
#try li.try1 img{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
#try li.try2 a{display:block; filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
width:97px;height:97px;border:1px solid #ccc;line-height:97px;text-align:center;}
#try li.try3{width:87px;height:87px;padding:5px;border:1px solid #ccc;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
#try li.try3:hover,
#try li.try2 a:hover,
#try li.try1 img:hover{filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;}
#alpha-teaching b{color:#f36; padding:2px 5px;background:#f6f6f6;}
久違的教學文又來囉!!
今天要教大家一個簡單的CSS運用... 透明度!!

透明度的呈現雖然並不常用,
但用來增添一些小變化卻是非常方便...

例如滑鼠移至圖片或連結區塊時, 能有一些透明度的改變...
像是這樣(滑鼠移過去試試看...↓)


  • 我是連結

  • 我是區塊我是區塊我是區塊


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

    透明度的CSS如下:

    opacity:.5;
    -moz-opacity:.5;
    filter:alpha(opacity=50);

    標準 / 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 發表在 痞客邦 留言(10) 人氣()



    請依下列步驟操作:
    1. 登入,至您的相簿中,找到您已上傳且欲嵌入的影音,點下"外嵌語法"

    2. 先依您的需要,選擇是否重複播放及是否自動播放,並複製"外嵌至 PIXNET 服務"下方框框中的語法
    3. 進入後台,點選部落格>側邊欄位設定,在「版位暫存區」按「新增版位」
    4. 自訂您所需要的欄位標題,並將語法貼至欄位內容區,按[送出]
    5. 將您剛所新增的自訂欄位從「版位暫存區」拖曳至側欄1或2的適當位置,按[儲存版面]
    6. 回到您的部落格,檢視該欄位是否正常出現即可

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

    插入相簿影音.png
    Part A. 插入站內影音
    1. 登入後台,點選部落格>發表文章。按下”插入相簿影音/圖片”,選擇”插入影音”。
       
    2. 出現視窗,依序選擇您放置影音檔案的相簿、是否要自動播放、是否要重複播放。
     這裡要注意的是,只有音訊檔支援重複播放選項,影像檔是不會有作用的。
    3. 選擇所需要的影音,按送出即可。
    Q: 音樂檔的縮圖長得都一樣,怎麼辦?
    A: 如上圖所示,把滑鼠指標放在音樂檔的縮圖上等一下,就會出現檔案名稱囉。
    Part B. 插入站外影音
    要在文章中插入站外影音的話,建議您依下列步驟執行:(以 YouTube 為例)
    1. 找到想要插入的影音檔,在影片下方會有「嵌入」字樣。點選後複製嵌入下方框框中的語法。
     
    2. 登入後台,點選部落格>發表文章。
    3. 若您為預設使用編輯器模式的使用者,請按一下左上角的 [HTML] 按鈕,即可跳出視窗輸入 HTML 原始碼,輸入完畢請按視窗左下角的 [更新]。
    4. 若您為使用純文字模式的使用者,請直接貼上語法即可。
    5. 繼續編輯文章並發表即可。
    Part C. 痞客邦貼心小叮嚀
    站方還是要提醒您注意版權的相關問題喔!
    請您撥空看一下以下的公告:
    小心! 你的部落格可能涉嫌'侵權'

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

    是否開放影音外嵌.png
    Q:如何設定影片是否開放外嵌?
    A:
    1. 請至管理後台的相簿後台。
    2. 點選左側欄位『整體相簿管理』的『基本進階設定』。
    3. 將右方下拉至『分享設定』中的『是否開放影音外嵌』處。
    4. 選擇設定為所有相簿皆開放外嵌、僅公開相簿開放外嵌、或是所有相簿都不開放外嵌。
    5. 最後別忘了點選右下角的『儲存設定』,就完成囉!
    您所選擇為不開放外嵌的影片,將不會提供外嵌語法給觀賞者:
    而已被外嵌至站外的影音Player,不但不能再被播放,還會加上提示語,讓觀賞者可以選擇是否連回您的相簿直接觀看喔!

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

    1
    Blog Stats
    ⚠️

    成人內容提醒

    本部落格內容僅限年滿十八歲者瀏覽。
    若您未滿十八歲,請立即離開。

    已滿十八歲者,亦請勿將內容提供給未成年人士。