@brizer 2016-02-21T14:06:23.000000Z 字数 2027 阅读 1610

css属性之background

前言

background是一个比较常用的css属性，之前一直没有完全的学习细节，今天来整理一下。

background

是一个组合属性，可以在其中设置所有的背景属性：

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

可以设置如下属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

如果不设置其中的某个值，也不会出现问题。
我们先看一个例子。

下面我们看看每个属性的用法。

background-color

顾名思义，是用来设置背景颜色的。

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

设置颜色时可以尽量使用网络安全色。

background-position

设置背景图片的起始位置。

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

我们看看利用像素定义背景图片位置的demo。从左上角开始算起。

background-size

规定背景图片的尺寸：

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

语法：

background-size: length|percentage|cover|contain;

值	描述	测试
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。	测试
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。	测试
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。	测试
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。	测试

可以看看对应demo

background-repeat

设置如何重复背景图像。

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

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

对应demo

通常no-repeat也就是背景图片仅显示一次，比较常用。

background-origin

该属性规定background-position属性相对于什么位置来定位。这是一个css3属性。

值	描述	测试
padding-box	默认值，背景图像相对于内边距框来定位。	测试
border-box	背景图像相对于边框盒来定位。	测试
content-box	背景图像相对于内容框来定位。	测试

background-clip

该属性规定背景的绘制区域，这是一个css3属性。

值	描述	测试
border-box	默认值，背景被裁剪到边框盒。	测试
padding-box	背景被裁剪到内边距框。	测试
content-box	背景被裁剪到内容框。	测试

background-attachment

该属性设置背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-image

该属性为元素设置背景图像。

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