CSS – 背景 background

简介

CSS 是用于设置网页中的元素背景图，或背影颜色的css样式属性。

基础使用

设置背景色

background: red

添加背景图片

background-image: url("../jpg.jpg")

设置背景平铺

background-repeat : round | space |

round : 会将图片进行缩放之后再平铺

space : 图片不会缩放平铺，只是会在图片之间产生相同的间距值

设置在滚动容器的背景行为

background-attachment : fixed | scroll

fixed :背景图片的位置图片固定不变，当网页往下滚动时，图片不会跟随div滚动

scroll : 当滚动容器的时候，背景也会跟着滚动

local : 当滚动容器内的内容滚动时，会跟随滚动。

background-size

css 里的 background-size 属性能够让程序员决定如何在指定的元素里展示，它通过各种不同的属性值改变背景尺寸呈现的大小。往往建议不要将图放大，如果有需要，尽量让图缩小。

语法：

background-size : auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

auto : 默认值，保持背景图片的原始高度和宽度

number : 设置具体的值，可以改变背景图片的大小

background-size : 100px 100px  // 把图片缩到 100px 的正方形
background-size : 100px  // 把图片宽设为 100px 高为等比例设置

percentage : 百分值，可以是 0% ~ 100% 之间的任意值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。

background-size : 50% 50%  // 这里的50%不是图片的 50%,而是容器元素的50%

cover : 将图片放大，以适合铺满整个容器，如果背景图片区域不足以包含整个元素时，会进行溢出性放大图片达到填满元素。

cover 和 contain 刚好相反，它同样有两种情况

1.图片大于容器

把图片缩放，缩放到填满整个元素就停止

2.图片小于容器

把图片放大，溢出性放大直到填满元式区域

contain ：按比例调整图片大小，使用图片宽高自适应整个元素的背影区域

两种情况：

1.图片大于容器

图片会按比例缩放，使图片全部包含在容器内。

2.图片小于容器

图片会被放大，直到等比例填满整个元素

background-origin

有时候我们需要使用一些小图片作为某些按钮显示的图片，但是这些图片比较小而多，如果都使用单独加载的话会非常影响请求量和服务器资源，所以通常我们会使用“精灵图”，一次加载一张具有多个小图标的大图，然后通过 background 设置来定位到“精灵图”所需要的小图。

关于精灵图的设置在 {//todo} 中有详解。

我们在定位精灵图的时候，图片在元素中默认是从元素的左上角原点开始计算，再通过 background-position 设置图片偏移来实现。

background-origin 是可用于设置图片是从元素那个位置开始算原点。

其中有三个属性：

border-box ： 默认值，该图片会从元素的边框开始算原点

padding-box ：该图片会从元素的内边距开始算原点

content-box  : 该图片会从元素的内容区开始算原点

background-clip

对图片进行剪裁时，应从元素的那部分作为原点开始剪

有三个可选属性：

border-box ： 显示元素 border 及以内的内容

padding-box ：显示元素 padding及以内的内容，边框处就被剪裁了

content-box  : 显示元素 内容里的内容，padding 处就被剪裁了