css常用样式-背景属性

01.背景颜色background-color

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

.box{ background-color: pink; }：

02.背景颜色background-image

• 属性名：background-image
• 作用：在盒模型border以内区域改变或者添加背景颜色
• 加载范围：默认的加载到边框及内部分。后期如果图片不重复加载，加载从border以内开始。
• 属性值：url(图片路径)
• url:uniform resourse locator,统一资源定位符，小括号内部书写查找 图片的路径。

background-image: url();/*图片路径*/

03.背景重复background-repeat

• 属性名：background-repeat
• 作用：设置添加的背景图是否要在盒子中重复进行加载。 属性值 | 作用 | | --------- | -------------------------------- | | repeat | 重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域 | | no-repeat | 不重复，不论背景图是否大于盒子范围，都只加载一次图片 | | repeat-x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复 | | repeat-y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复

04.背景定位background-position

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

background-position:x y;
x,水平方向位置。
y,垂直方向位置

• 单词表示法
  • 使用代表方向的单词进行书写。
    • 水平方向可选单词：left、center、right
    • 垂直方向可选单词：top、center、bottom
    • 单词表示图片与盒子背景区域进行对应方向的对齐。
• 像素表示法
  • 使用px值作为背景定位的属性值。
  • px值区分正负，正负代表位移方向不同：
    • 正数：盒子的原点向右、向下移动。
    • 负数：盒子的原点向左，向上移动。
    • 可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。
    • 制作方法，需要使用FW软件量取尺寸，读取数据。
• 百分比表示法
  • %表示法用百分比数字作为属性值。
  • 100%代表的数值：
    • 水平方向=盒子的border以内的背景区域宽度减去图片的宽度。
    • 垂直方向=盒子的border以内的背景区域高度减去图片的高度。 属性值 | 说明
      | ------ | ------------------------------------------------------------------------ | | scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走 | | fixed | 固定的，定位的参考点为浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着滚动而滚走。

05.综合写法background

• background属性可将五个单一属性的值进行合写。
• 属性值：可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可互换位置。

body{ background:url(https://res.read.ifeng.com/images/book/3251310.jpg) no-repeat center top finxed #fff; }

• 注意事项

  • 注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。

    body{ background:url((https://res.read.ifeng.com/images/book/3251310.jpg) no-repeat center top finxed #fff; background-attachment:scroll; }

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

背景应用-替换插入图

01. 场景一：替换插入图

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

• 文字隐藏的方法
  • 将字号设置为0。浏览器有兼容问题。可设置给标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接在设置溢出隐藏属性，将溢出文字隐藏。

02.场景二：padding区域背景图

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

03.场景三：精灵图技术

• 当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。网页中往往会应用很多小的背景图像作为修饰，当过多时，服务器就会频繁地接受和发送请求，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称CSS Sprites、CSS雪碧）
• CSS精灵
• css精灵是一种处理网页背景图像的方式。
• 它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，用户访问该网页时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。
• 通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。
• css精灵的技术依据
• 将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片。
• 利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。
• 制作精灵图的注意事项
• 精灵图上放得都是小的装饰性质的背景图片，插入图片不能往上放。
• 精灵图的宽度取决于最宽的那个背景图片的标签宽度。
• 精灵图可横向摆也可纵向摆，但每个图片之间必须留足够的空白。保证背景图片加载到一个标签内部时，不能出现多余内容。
• 在精灵图的最低端，尽量留一点空白，方便以后添加其他精灵图。
• 可以使用一些在线工具，快速生成精灵图。

04.背景缩放background-size

• 通过background-size设置图片的尺寸，就像我们设置的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

css3新增背景属性

01.背景半透明

css3支持背景半透明的写法，颜色值增加了一种rgba模式。 rgba模式：background-color:rgba(0,255,0,0.4);在rgb上增加了一个不透明度，不透明度取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明。 书写方式：rgba（红色，绿色，蓝色，不透明度） 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

02.半透明其他应用

同样，可以给文字和边框透明，都是rgba的格式来写。

03.背景缩放background-size

通过background-size设置图片的尺寸，就像我们设置的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

属性值	说明
px值	1-2像素值，只设置1个值，垂直方向等比例拉伸，设置2个值按照设置值加载
百分比	自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，如有溢出部分则会被隐藏
contain	自动调整缩放比例，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域。

04.多背景

• css3中规定，一个盒子上，可以添加多个背景图片。
• background-image的属性值书写时，以逗号分隔多背景的url路径地址。
• 注意：背景加载时，先写的背景压盖后写的背景图片。