WFU

[筆記][Css語法]Blogger的移過圖片變亮暗

把圖片可以用滑鼠移過來,移過去,讓圖片可以暗亮的特效,是不是覺得很棒?
碳碳在這邊也是一樣當作是筆記,要如何做到這種特效呢?答案是修改 css 語法就可以做,
目前碳碳只有測試 Blogger 和痞客邦能使用,基本上其他的部落格也應該可以做到,
那就開始動手做。(在修改之前先備份您們的佈景,以免作錯而無法恢復)

※這種特效必須是圖片有超連結的情況下才會出來,若沒有超連結是沒有效果的。
請在css上找一個位置,加入以下語法(如果已經有 a img 或 a img:hover 就只要加{ }中的語法)
a img {
  border-width:0;
  opacity:0.75;
  }

a img:hover {
  opacity:3;
}
 說明一下, opacity 的數值越小,就越暗;越大越亮,接下來按儲存就大公告成囉。

4 個迴響:

linroex 提到... 回覆此篇留言

我記得:hover還可以用在表格上
例: td:hover{}
不知道有沒有打錯........

碳碳 提到... 回覆此篇留言

@linroex
碳碳還沒試過,目前就是有做到哪個CSS語法就會去研究,
目前碳碳還沒用到表格相關CSS語法,
等研究出來再發出文章(以筆記的方式)

禾子恩 提到... 回覆此篇留言

不好意思想請問,
由於對Blogger的css還不熟,
如果想要把這個語法運用在網誌中所有有聯結的圖片都可以滑鼠移過變暗,
我應該要把語法放在修改css的哪一個部位?
是body之間嗎? 還是哪一個區域呢?

以上,感謝大大

碳碳 提到... 回覆此篇留言

@禾子恩
其實blogge大致上只是HTML 加上 CSS的構造,
比較有彈性修改。

這個CSS語法已經是所有「超連結」的圖片有效,
a {} 代表超連結
a img{} 代表有超連結的圖片

至於要把語法放在哪個部分,
先進入「修改HTML」後,
勾選「展開小裝置範本」(可不勾選,詳細的HTML修改用的)
然後按下鍵盤的「Ctrl」+「F」搜尋
打上「body {」並搜尋,應該會找到
其實你可以放在body{}的下方,
而並非是<body>

如還有問題的話再留言一下吧 ^^

張貼留言

留言須知:
1.請勿留下有關情色和垃圾回應。
2.即使不留言,若是好文,請幫忙按下推文,感恩^^。
3.請勿攻擊、譭謗他人,碳碳保有刪除和保留的權利。
4.文章內容用詞若有不妥之處,請指點一下!^^