css background属性

2018年04月12日 08:32 | 2935次浏览 作者原创 版权保护

在 CSS 中常见的背景 (background) 属性有以下几种:

background-color

background-image

background-repeat

background-attachment

background-position

每一个属性在以下会有详细地介绍:


background-color

background-color 属性是用来指定背景的颜色。

css样式效果
 p {background-color: 00FF00;}  绿色背景
 p {background-color: red;}  红色背景


background-image

background-image 属性是用来指定用什么图案来当做背景。

css样式效果
p {background-image:url(yp.jpg);}有背景图案,yp.jpg为图片全路径


background-repeat

background-repeat 属性是用来指定背景图案重不重複。预设值是 "repeat",代表此背景图案将在 x- 及 y-方向都会重覆。其他的值为 x-repeat (x-方向重复)、y-repeat (y-方向重复)、以及 no-repeat (不重复)。

举例如下:

css样式效果

p { 

  background-image:url(yp.jpg); 

  background-repeat: no-repeat; 

}

背景图案不重复

p { 

  background-image:url(yp.jpg); 

  background-repeat: repeat-x; 

}

背景图案在 x-方向重复

p { 

  background-image:url(yp.jpg); 

  background-repeat: repeat-y; 

}

背景图案在 y-方向重複。

-

p { 

  background-image:url(yp.jpg); 

  background-repeat: repeat; 

}

背景图案在 x- 及 y-方向重複。

--------------------------------




background-attachment

background-attachment 属性是用来指定背景图案是否在萤幕上固定。这个属性可能的值为 "fixed" (当网页卷动时,背景图案固定不动) 以及 "scroll" (当网页卷动时,背景图案会跟著移动)。

以下是两个例子:

背景图案不动

body {background-attachment: fixed; 
  background-image: url("yp.jpg"); 
  background-repeat: no-repeat; 
}

背景图案移动

body {background-attachment: scroll; 
  background-image: url("yp.jpg"); 
  background-repeat: no-repeat; 
}


background-position

background-position 属性是用来指定背景图案的位置。它的值可以是:

两个字:第一个字为 [top,center,bottom] 中三选一,而第二个字由 [left,center,right] 中三选一。

两个百分比:第一个百分比为 x-轴的百分比,第二个为 y-轴的百分比。

两个数目:第一个数目为 x-轴的位置,第二个数目为 y-轴的位置。

举例如下:

背景图案在中间

body { background-image: url("yp.jpg"); 
  background-repeat: no-repeat; 
  background-position: center center; 
}

图案的位置离上面 20% 与离左边 20% 的地方

body { background-image: url("yp.jpg"); 
  background-repeat: no-repeat; 
  background-position: 20% 20%; 
}



小说《我是全球混乱的源头》
此文章本站原创,地址 https://www.vxzsk.com/785.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程