css3 设置背景样式

1.设置背景颜色

background-color:red;

2.设置背景图片

background-image:url(“xxxx”);

注：

• 如果图片大于容器，那么默认就从容器左上角开始放置
• 如果图片小于容器，那么图片默认平铺

3.设置背景平铺

background-repeat:no-repeat;

参数说明：

• repeat：图片平铺（默认）
• round：会将图片进行缩放之后再平铺
• space：图片不会缩放平铺，只会在图片之间产生相同的间距值
• no-repeat：不平铺

4.设置滚动容器的背景行为：跟随滚动/固定

background-attachment:fixed;

参数说明：

• fixed：背景图片的位置固定不变
• scroll：当滚动容器的时候，背景图片也会跟随滚动
  当滚动容器内容时可设定：
• local：背景图片会跟随内容一起滚动
• scroll：背景图片不会跟随内容一起滚动

5.设置背景图片的大小

background-size:300px 500px;

参数说明：

1. auto：此值为默认值，保持背景图片的原始高度和宽度;
2. number：此值设置具体的值，可以改变背景图片的大小;
3. percentage：此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
4. cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小
5. contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止。
6. 当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。

6.设置背景图片的位置

background-position:center;

扫描二维码关注公众号，回复： 11808627 查看本文章

7.设置背景坐标的原点

background-origin:content-box;
参数说明：

• border-box：从border的位置开始填充背景，会与border重叠
• padding-box：从padding的位置开始填充背景，会与padding重叠
• content-box：从内容的位置开始填充背景

8.设置内容的裁切：（设置的是裁切，控制的是显示）

background-clip:content-box;

参数说明：

• border-box：显示border及以内的内容
• padding-box：显示padding及以内的内容
• content-box：显示content及以内的内容

web前端交流QQ群：327814892