首頁 > web前端 > css教學 > 使用CSS為圖片設定背景圖操作

使用CSS為圖片設定背景圖操作

巴扎黑
發布: 2017-08-14 14:48:27
原創
2207 人瀏覽過

為圖片設定背景圖片,是一個非常搞的實例。這句話或許就覺得有點好玩。我們為以IMG標籤引入頁面的圖片設定背景圖片。

CSS的功能是非常強大的,對於元素的表現以及頁面的佈局,都提供了非常強大的功能,這主要在於我們靈活的運行,在這方面提供了豐富且富含價值的各種教程與資訊。對於圖片的使用,其實更多的是在內容層。根據WEB標準的思路,表現層的圖片,已經都被分開到CSS中去了。只有作為內容的圖片才能以IMG標籤插入在頁面中,這也是一直強調的語意。

  為圖片設定背景圖片,是一個非常搞的實例。這句話或許就覺得有點好玩。我們為以IMG標籤引入頁面的圖片設定背景圖片。這樣的應用範圍或許不大,但可以鍛鍊你的思路,讓你理解元素在HTML與CSS中的意義與彈性。
我們看下面的程式碼。

  
  這是以img標籤將圖片引入頁面中。

  我們再來寫CSS。


img {
display:block;
width:443px;
height:60px;
padding-bottom:10px;
background:url(jb52bg. jpg) no-repeat left bottom;
}
  將img元素轉換為區塊元素,設定寬和高。設定下側的內邊距為10px。為背景圖顯示出來預留一定的空間。最後定義背景圖片即可。
   由此小實例,可以看出CSS的靈活和強大的功能。

以上是使用CSS為圖片設定背景圖操作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板