CSS background背景

admin發表於2018-08-23
CSS

通過background屬性可以設定元素的背景圖片或者背景顏色。

background是一個複合屬性，顧名思義，它是多個屬性的集合體:

（1）.background-color：指定元素的背景顏色。 

（2）.background-image：指定元素的背景影像；可以是真實圖片路徑或使用漸變建立的“背景影像”。 

（3）.background-repeat：指定元素的背景影像如何鋪排填充。 

（4）.background-attachment：指定元素的背景影像是隨物件內容滾動還是固定的。 

（5）.background-position：指定元素的背景影像位置。 

（6）.background-origin（CSS3）：指定元素的背景影像顯示的原點。 

（7）.background-clip（CSS3）：指定元素的背景影像向外裁剪的區域。 

（8）.background-size（CSS3）：指定元素的背景影像的尺寸大小。

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
div{background:#F60 url(logo.gif) top right no-repeat}

程式碼解析:

（1）.#F60對應background-color。

（2）.url(logo.gif)對應background-image。

（3）.top right對應background-position。

（3）.no-repeat對應background-repeat。

複合屬性可以將具體每一個屬性單獨書寫，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:300px;
  height:300px;
  border:1px solid blue;
  /*元素背景設定*/
  background-color:#ccc;
  background-image:url(mytest/div+css/border.jpg);
  background-position:top right;
  background-repeat:no-repeat
}
</style>
</head>
<body>
<div></div>
</body>
</html>

一.background-color：

設定元素的背景顏色，如果同時也設定了背景圖片，背景圖片會覆蓋背景顏色。

程式碼片段演示:

[CSS] 純文字檢視 複製程式碼
background-color:#ccc;

二.background-image:

設定元素的背景圖片，格式如下:

程式碼片段演示:

[CSS] 純文字檢視 複製程式碼
background-image:url(mytest/div+css/border.jpg);

三.background-repeat:

設定背景圖片是否重複，取值如下:

（1）.repeat：背景影像在橫向和縱向平鋪，預設值。 

（2）.repeat-x：背景影像在橫向上平鋪。 

（3）.repeat-y：背景影像在縱向上平鋪。 

（4）.no-repeat：背景影像不平鋪。 

（5）.round：背景影像自動縮放直到適應且填充滿整個容器。（CSS3） 

（6）.space：背景影像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3） 

四.background-attachment:

設定背景影像是隨物件內容滾動還是固定。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  margin:0px;
  padding:0px;
}
div{
  background-image:url(mytest/demo/tree.jpg);
  background-attachment:fixed;
  background-repeat:no-repeat;
  height:1500px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

拖動滾動條，背景圖片處於固定狀態，而不是跟隨滾動。

相關文章