自製圖片外框式樣

在文章中插入圖片,感覺上文章的可看度就提升了不少,但是如果你的佈景主題對圖片沒有作式樣的設計,那麼圖片看起來就比較死板,就像說明一的圖片一樣。 max 今天跟大家分享一個簡單的方法,不需要更改佈景主題式樣檔裡面的設計,只需要在編輯文章插入圖片時加上一些式樣的語法,可以讓圖片馬上有不一樣的效果(說明四圖片所呈現的效果)。

使用的方法單說明如下:

1. 準備在文章中使用的圖片一張(範例圖片)。

範例圖片
(範例圖片)↗

2. 準備跟說明一圖片大小相同的外框式樣圖片一張,請準備gif格式去除底色(外框式樣圖片)。

外框式樣圖片
(外框式樣圖片)↗

3. 在撰寫文章時,切換到程式碼模式,編寫圖片的語法如下:
<img src="http://www.yourdomain.com/外框式樣圖片.gif" style="background: url(http://www.yourdomain.com/範例圖片.jpg) no-repeat">

4. 以上完成,呈現的圖片效果如下,有興趣的朋友可以試試看變化出其他不同的效果。


(圖片含有外框式樣的樣子)↗

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

網站架設

WordPress 虛擬主機免費安裝設定