CSS 背景

Dorissun 2015-12-28

一.背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为红色:

p {background-color: red}

 如果希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:

p {background-color: red;  padding: 20px}

 二.背景图像

要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。

如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

body {background-image: url(/image/liang.gif);}

 三.背景重复

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性

属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。

repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。

默认地,背景图像将从一个元素的左上角开始。

1.水平重复

body
  { 
  background-image: url(/image/liang.gif);
  background-repeat: repeat-x;
  }

 2.垂直重复

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

3.任何方向都不重复

body      
  {       
  background-image: url(/image/liang.gif);      
  background-repeat: no-repeat;      
  }

  

相关推荐