閱讀(10.1k) 書(shū)簽贊(6) 我要糾錯(cuò)

CSS 背景

2018-09-29 15:42 更新

在下面的列表中描述了為背景設(shè)置樣式的屬性。

background-color
設(shè)置元素的背景顏色。
顏色在任何圖像后面繪制。
background-image
設(shè)置元素的背景圖像。
如果指定了多個(gè)圖像，則每個(gè)后續(xù)圖像都繪制在其前面的圖像之后。
background-repeat
設(shè)置圖像的重復(fù)樣式。
background-size
設(shè)置背景圖像的大小。
background-position
定位背景圖像。
background-attachment
設(shè)置具有視口的元素中的圖像的附件樣式。
background-clip
指定圖像的剪裁樣式。
background-origin
定位背景圖像。
background
簡(jiǎn)寫(xiě)元素。

背景顏色

我們可以使用 background-color 設(shè)置背景顏色。

以下代碼設(shè)置背景顏色。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
  background-color: lightgray;
}
</style>
</head>
<body>
  <p>This is a test.<br/>
  This is a test.<br/>
  This is a test.<br/>
  This is a test.<br/>
  This is a test.<br/>
  This is a test.<br/>
  This is a test.<br/>
  This is a test.<br/>
  </p>
</body>
</html>

背景圖像

我們可以使用 background-image 設(shè)置背景圖像。

以下代碼設(shè)置背景圖像。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
  background-image: url('/statics/images/course/img_flowers.jpg');
  background-size: 20px 20px;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
  <p>This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  
  This is a test. <br/>
  This is a test. <br/>
  
  </p>
</body>
</html>

z-index屬性的默認(rèn)值為零。

背景重復(fù)

我們可以使用 background-repeat 屬性控制圖像將如何覆蓋整個(gè)背景區(qū)域。

background-repeat 的允許值在下面的列表中描述。

repeat-x - 水平重復(fù)圖像; 圖像可能會(huì)碎片化。
repeat-y - 垂直重復(fù)圖像; 圖像可能會(huì)碎片化。
repeat - 在兩個(gè)方向重復(fù)圖像; 圖像可能會(huì)碎片化。
space - 圖像被重復(fù)以填充空間而不產(chǎn)生碎片，并且剩余區(qū)域被均勻地分配在圖像周?chē)?/li>
round - 圖像被縮放，以便它可以重復(fù)而不創(chuàng)建碎片。
no-repeat - 圖像不重復(fù)。

您可以為水平和垂直重復(fù)設(shè)置值，但如果您只提供一個(gè)值，瀏覽器將在兩個(gè)方向使用該重復(fù)樣式。

但對(duì)于repeat-x和repeat-y，瀏覽器將使用無(wú)重復(fù)樣式作為第二個(gè)值。

以下代碼顯示了如何使用 background-repeat 以使背景圖像沿x軸重復(fù)。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
  background-image: url('/statics/images/course/img_flowers.jpg');
  background-size: 20px 20px;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
  <p>This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  
  This is a test. <br/>
  This is a test. <br/>
  
  </p>
</body>
</html>

圖像在元素上水平重復(fù)。

屬性	描述	CSS
background-attachment	修復(fù)或滾動(dòng)背景圖像與頁(yè)面的其余部分	1
background-clip	設(shè)置背景的繪制區(qū)域	3
background-color	設(shè)置背景顏色	1
background-image	設(shè)置背景圖像	1
background-origin	設(shè)置背景圖像的定位區(qū)域	3
background-position	設(shè)置背景圖像的起始位置	1
background-repeat	如何重復(fù)背景圖像	1
background-size	設(shè)置背景圖像的大小	3
background	背景屬性在一個(gè)聲明	1

CSS 背景

在下面的列表中描述了為背景設(shè)置樣式的屬性。

背景顏色

背景圖像

背景重復(fù)

相關(guān)屬性

推薦文章

推薦教程

推薦課程

在下面的列表中描述了為背景設(shè)置樣式的屬性。