DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS3教程(5):網頁背景圖片
CSS3教程(5):網頁背景圖片
編輯:CSS進階教程     

背景圖片/紋理有很多種使用方式,常常用於添加網站的最佳的最終美化。現在它在CSS3中被重視,我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。

上一篇文章:CSS3教程(4):網頁邊框和網頁文字陰影

CSS3的背景圖片大小可以寫成 background-size:Apx Bpx;
-Apx = x軸(圖片寬度)
-Bpx = y軸(圖片高度)

了解了這些,我們開始體驗這個特性吧:
最好支持CSS3背景大小的浏覽器是Safari和Opera,所以我們只需要使用-o和-webkit前綴。

背景大小

background-size

#backgroundSize{
	border: 5px solid #bd9ec4;
	background:url(image_1.extention) bottom right no-repeat;
	-o-background-size: 150px 250px;
	-webkit-background-size: 150px 250px;
	padding: 15px 25px;
	height: inherit;
	width: 590px;
}

浏覽器支持:

  • Firefox(3.05+…)
  • Google Chrome(1.0.154+…)
  • Google Chrome(2.0.156+…)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6+…)
  • Safari(3.2.1+ windows…)

為了在CSS3中應用多背景圖片,我們使用都好隔開,例如:

background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;

我們可以在一行代碼中嘗試放置多個不同的圖片…

多背景圖

background-size

#backgroundMultiple{
	border: 5px solid #9e9aab;
	background:url(image_1.extention) top left no-repeat,
	url(image_2.extention) bottom left no-repeat,
	url(image_3.extention) bottom right no-repeat;
	padding: 15px 25px;
	height: inherit;
	width: 590px;
}

浏覽器支持:

  • Firefox(3.05+…)
  • Google Chrome(1.0.154+…)
  • Google Chrome(2.0.156+…)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6+…)
  • Safari(3.2.1+ windows…)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved