css中的background背景属性使用总结

background背景属性是CSS中重要的一个属性。使用background属性可以设置一个背景元素的各种样式，包含了设置填充背景的颜色，使用自己的图片作为背景，让图片会水平和垂直重复直至铺满整个元素，控制着背景图片在元素中的位置等等。使用图片作为背景在一个网页布局中常常会遇到，一般设置对象图片作为背景属性实例，首先设置背景颜色 紧跟设置图片作背景 紧跟图片是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须，一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置。以下的内容就来具体说明background背景属性的各种使用方式。

首先可以学习相关的免费课程

1. 学习《CSS 0基础入门教程》中的 CSS背景 章节课程

2. 观看《黑马程序员css视频教程》中的 背景和边距 视频课程

background背景属性

1. 必须掌握的CSS知识-background属性

当我们为body设置border后，我们会发现border只是圈住了body里面有内容的地方。但是为body设置背景色，则填充整个屏幕。

使用图像作为背景时，图像他的定位是参照屏幕的可视区域，而不是被border框住的部分。

每个参数使用空格隔开，依次是颜色，图片，重复，固定方式，位置。

2. css中background相关属性

百分比/length：若为百分数，背景图的尺寸为容器乘以百分数的乘积。只设一个，第二个为auto（以保持和原始背景图一样的长宽比例）。

如果都设为100%，则背景图会铺满容器，但长宽比率会发生变化。

contain:容器按背景图的固定比例包含整个背景图。背景图的尺寸以背景图按固定比例放大，其任意一条边到达容器的边界为止，经常会导致另一边空白(有no-repeat时)。

cover:背景图按固定长宽比放大，至填充满整个容器为止（背景图短一点的那条边也到达容器边界）。有一部分的背景图会因超出容器而被切除。

3. 详解css之背景background属性

在同一个元素中，background复合属性写在前面，单独需要设置的背景属性写最后面；理由：长江前浪推后浪，前浪死在沙滩上

在同一元素中添加了多个背景图，其他背景属性只能单独写，不能在用复合属性简写；

在嵌套的父子级元素中，不建议写同名属性。理由：在子元素尺寸大于等于父元素尺寸的情况下，父元素的样式会被子元素覆盖；

在实际工作中，多用背景图，少用插入图片。

4. CSS3中关于新增背景系列background的详解

border-box： 忽略边框，直接从边框的起始0，0点开始平铺 padding-box：默认值，忽略padding，直接从padding的起始0,0点开始平铺 content-box：从内容部分开始平铺，会预留出padding的位置。所以说padding会对它造成影响

5. 网页中css background背景图和背景颜色的设置方法

CSS 背景这里指通过CSS对对象设置背景属性，如网页中通过CSS设置背景各种样式。

Css background背景作用：设置纯色背景。背景background可以设置对象纯色的背景颜色，设置图为背景。可以设置对象背景为图片，如果背景是图片可以让图片重复平铺横铺，或将图片作为对象背景固定在对象任何位置。

6. CSS的background属性及CSS3的背景图片设置总结分享

background 在一个声明中设置所有的背景属性

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动

background-color 设置元素的背景颜色

background-image 设置元素的背景图像

background-position 设置背景图像的开始位置

相关问答

1. 如何加速css background图片的加载速度

2. ios 不能用 background:unset吗？那想做取消背景色怎么做？

3. body 的 background 位置

【相关推荐】

1. 免费教程：《CSS 在线手册》

2. 免费视频教程：《弹指间学会HTML视频教程》

3. 免费视频教程：《php.cn独孤九贱（2）－css视频教程》

以上就是css中的background背景属性使用总结的详细内容，更多请关注其它相关文章！