讓部落格中的圖片增加不透明效果(in Blogger)

Posted By 非典型文字工作者 / October 26, 2010 @ 7:16 PM

今天從 BloggerTheme.Net 的這篇文章看來的教學,簡單的翻譯一下:

如何在圖片上製造不透明效果(for Blogger)呢?首先,原文作者以 hover effect (是指當滑鼠指標指著某個網頁元素,但尚未啟用(或點選)這個元素時,而產生的效果風格。)來作為增加不透明的特效手法。步驟如下:

Step 1:

登入 Blogger,進入「設計」並點選「修改 HTML」(強烈建議您在編輯範本之前,先儲存備份。)。然後,請尋找「</head >」。

Step 2:

將以下 CSS code 放置於「</head>」之前(或者說是<head> 與 </head> 之間):

<style type='text/css'>
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>


Step 3:

儲存範本(Template)。現在,當您想在部落格中的某一圖片增加不透明特效時,必須在圖片的「linking code」增加「class="opacity"」這個步驟在你的「image code」之中,例如原文中的< a >標籤。

正常的Code:

<a href="http://stickeraction.com/nomistreatment/go" title="禁虐"><img src="http://stickeraction.com/nomistreatment/sticker/3" alt="禁虐" border="0" /></a>

改變後:

<a class="opacity" href="http://stickeraction.com/nomistreatment/go" title="禁虐"><img src="http://stickeraction.com/nomistreatment/sticker/3" alt="禁虐" border="0" /></a>

範例:

禁虐


最後,藉機會傳播一下:「請愛護小動物,不要輕易地傷害牠!



 

0 Comment:

歡迎您回覆與本篇文章的寶貴意見,但請勿回覆內容與文章本身無關、人身攻擊或其他不適當的言論。本板將會提出嚴重警告以及保留法律上的任何權利。

請訪客您在「Comment as」處選擇個人身分(Open ID)回應。若訪客您尚無法登入身份,請選「Name/URL」留下回應資料,再次謝謝您的回應 :)

Post a Comment

ShareThis

Copyright 2009 春如月筆記. Powered by Blogger Blogger Templates create by Deluxe Templates. WP by Masterplan