background属性用法总结

background属性总结

CSS 背景属性用于定义HTML元素的背景，常用的背景属性用法有以下几种：

1.background-color(背景颜色）

如：div{background-color:red;}

2.background-image（背景图片） 

如：div{background-image:url("./img/banner.jpg");}
​

注：url小括号里是图片的地址，需要加引号

3. background-repeat（背景平铺）

默认情况下，背景图片会从水平和垂直两个方向重复铺满整个区域

值	作用
repeat	默认值，在水平方向和垂直方向都重复（默认值）
no-repeat	不重复背景图像
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直方向会重复背景图像

 

4.background-attachment（背景图片固定）

background-attachment属性定义了元素的背景图片是否固定或随着页面的其余部分滚动，有如下取值：

值	作用
scroll	背景图片随着页面的滚动而滚动（默认）。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

设置一个固定的背景图片
body
{ 
    background-image:url("./img/picture.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
}

5.background-position（背景图片位置）

background-position属性设置背景图像的起始位置,有三种取值方式：

值	解释
xpos ypos	关键字定位，应用对齐规则。水平方向有left/center/right;垂直方向有top/center/bottom;取一个值时另外一个默认为center;xpos为left表示图像的左边与对象的左边对齐，同理，ypos为top时表示图像的顶部与对象的顶部对齐
x(长度）y(长度）	第一个值是水平位置，第二个值是垂直位置。左上角是0。单位可以是像素（0px0px）或任何其他 css单位。如果仅指定了一个值，其他值将是50％。将背景图像的左上角，放置在对象背景区域（x,y）所指定的位置，即定义的是背景图片的左上角相对于背景区域左上角的偏移量
x%y%	第一个值是水平位置，第二个值是垂直位置。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％

div{background-position:center;}
表示背景图片的中心与背景区域的中心对齐
div{background-position:20px 30px;}
表示背景图片的左上角顶点相对于对象背景区域的左上角顶点在x轴向右移20px,在y轴下移30px

6.background-size 属性（设置背景图片大小）

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

div{background-image:url("./img/banner.jpg");
    background-size:60px 50px;
    }
背景图片宽度为60px,高度为50px

7.background-clip 属性

.background-clip 属性定义背景的显示区域

值	描述
border-box	默认值。背景剪切在边框盒内
padding-box	背景绘制在填充盒内（剪切成填充方框）
content-box	背景绘制在内容盒内（剪切成内容方框）。

8.background-origin 属性

background-origin定义背景的渲染区域

值	描述
border-box	边框盒的左上角开始渲染
padding-box	填充盒的左上角开始渲染
content-box	内容盒的左上角开始渲染