css為圖片設定背景圖片

來源:互聯網
上載者:User

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

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

  <img scr="jb51.jpg" />
  這是以img標籤將圖片引入到頁面中。

  我們再編寫CSS。

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.