色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS 背景

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

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

背景顏色

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

以下代碼設置背景顏色。

<!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設置背景圖像。

以下代碼設置背景圖像。

<!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屬性的默認值為零。

背景重復

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

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

  • repeat-x - 水平重復圖像; 圖像可能會碎片化。
  • repeat-y - 垂直重復圖像; 圖像可能會碎片化。
  • repeat - 在兩個方向重復圖像; 圖像可能會碎片化。
  • space - 圖像被重復以填充空間而不產生碎片，并且剩余區域被均勻地分配在圖像周圍。
  • round - 圖像被縮放，以便它可以重復而不創建碎片。
  • no-repeat - 圖像不重復。

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

但對于repeat-x和repeat-y，瀏覽器將使用無重復樣式作為第二個值。

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

<!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>

圖像在元素上水平重復。

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