background屬性

weixin_51770393發表於2020-11-22

1.background-color 規定要使用的背景顏色。

body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

2.background-position 規定背景影像的位置。

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

3.background-size 規定背景圖片的尺寸。

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

4.background-repeat 規定如何重複背景影像。

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

5.background-origin 規定背景圖片的定位區域。

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

6.background-clip 規定背景的繪製區域。

div
{
background-color:yellow;
background-clip:content-box;
}

7.background-attachment 規定背景影像是否固定或者隨著頁面的其餘部分滾動。

body 
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
  }

8.background-image 規定要使用的背景影像。

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }