1.2-5css背景属性

CSS 常用样式

背景属性

CSS 中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观。
CSS 中通过 background 属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。

背景颜色 background-

属性名：background-color
作用：在盒子区域添加背景颜色的修饰。
加载区域：在 border 及以内加载背景颜色。
属性值：颜色名、颜色值。

背景图片 background-image

属性名：background-image
作用：给盒子添加图片的背景修饰。
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始。
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。
background-image: url(images/meng.jpg);

背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。

背景重复 background-repeat

属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载。
根据属性值不同，有四种重复加载方式。

属性值	作用
repeat	重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域
no­repeat	不重复，不论背景图是否大于盒子范围，都只加载一次图片
repeat-­x	水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
repeat­-y	垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复

背景定位 background-position

属性名：background-position
作用：主要用于设置不重复的图片在背景区域的加载开始位置。
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔。

• 第一个属性值：表示背景图片在水平方向的位置。
• 第二个属性值：表示背景图片在垂直方向的位置。

1、单词表示法
属性值都是使用代表方向的单词进行书写。
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐。
background-position: right bottom;

2、像素表示法
使用像素值作为背景定位的属性值。
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。
background-position: 100px 50px;
background-position: -100px -50px;

像素值区分正负，正负代表位移方向不同：
正数：表示图片针对盒子的原点向右、向下移动。
负数：表示图片针对盒子的原点向左、向上移动。(可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。制作方法，需要使用 FW 软件量取尺寸，读取数据。)

3、百分比表示法
百分比表示法使用百分比数字作为属性值。
100%代表的数值：
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
background-position: 100% 100%;

背景附着 background-attachment

属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。

属性值	说明
scroll	滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
fixed	固定的，背景图的定位参考点从盒子 border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走

综合写法 background

background 属性可以将五个单一属性的值进行合写。
属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
background；url(image/bg4.jpg) no-repeat center top fixed #fff;

注意事项
注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
background: pink;
没有设置的属性将会按照默认值加载

注意2：如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写 法进行层叠。

background；url(image/bg4.jpg) no-repeat center top fixed #fff;
background: pink;

背景应用

背景属性在实际应用中有很多使用场景，我 们需要了解几个比较常见的场景。

场景一：替换插入图

<h1>标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大的标题等。
另外<h1>内部的文字，可以帮助提高SEO 搜索排名。
如果在h1中设置的是 logo 图片时，在标签中插入图片，就不能书写搜索关键字。如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给<a>标签或<h1>标签。

文字隐藏方法

• ①将字号设置为 0。IE8 及以上或高版本 浏览器可以隐藏文字，但是 IE7 及以下有 兼容问题。

• ②可以设置给<a>标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。

场景二：padding 区域背景图

制作方法
在一个盒子中有背景图部分，而且有文字内容，想让文字让开背景图区域进行加载，背景区域应该使用 padding 挤出位置。
四个方向的 padding 都可能用于添加背景图。

场景三：精灵图技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

css 精灵

CSS 精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

css 精灵的技术依据

• ①将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。
• ②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。

制作精灵图的注意事项

• 1.精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
• 2.精灵图的宽度取决于最宽的那个背景图片的标签宽度。
• 3.精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容。
• 4.在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图。

可以使用一些在线工具，快速生成精灵图。

CSS3 新增背景属性

背景半透明

CSS3 支持背景半透明的写法，颜色值增加了一种 rgba 模式。
rgba 模式：在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。
书写方式：rgba(红色，绿色，蓝色，不透明度)
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

半透明其他应用
可以给文字和边框设置透明度，都是 rgba 的格式来写。

背景缩放 background-size

通过 background-size（background-size不能进行合写）设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动 Web 开发中做屏幕适配应用非常广泛。

属性值	说明
px 值	1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值 加载。
百分比	同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
cover	自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。
contain	自动调整缩放比例，把图像扩展至能完整显示在背景区域的最大尺寸。

当background-size位于background url属性的上方时将不起作用

多背景

CSS3 中规定，一个盒子上，可以添加多个背景图片。
background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址。
注意：背景加载时，先写的背景压盖后写的背景图片。
background-image : url(1.jpg),url(2.jpg);
此时图片1.jpg显示在2.jpg上