[七]HTML+CSS基础（background）

一，背景

background-image可以为元素指定背景图片。和background-color类似，这不过这里使用的是一个图片作为背景。

图片原来的样式.png

• 如果背景图片大于元素，默认会显示图片的左上角
• 如果背景图片和元素一样大，则会全部显示
• 如果背景图片小于元素大小，则会默认的平铺以充满元素
• 可以同时为一个元素设置背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下，设置完背景图片时，都会同时指定一个背景颜色

放在网页中的样式.png

平铺.png

background-repeat用于控制背景图片的重复方式。如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。

• 可选值：
  • repeat ：默认值，图片左右上下平铺
  • no-repeat ：只显示图片一次，不会平铺
  • repeat-x ：沿x轴水平平铺一张图片
  • repeat-y ：沿y轴水平平铺一张图片

no-repeat.png

background-position用来精确控制背景图片在元素中的位置。

• 可以通过三种方式来确定图片在水平方向和垂直方向的起点:
  • 关键字：top right bottom left center (需要两个组合,如果只给一个值，第二个值默认为center)background-position:center center
  • 百分比
  • 数值:可以为负数 background-position: 200px 100px

background-attachment用来设置背景图 片是否随页面滚动。当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器窗口。不随窗口滚动的图片一般都是设置给body，而不是设置给其他元素

• 可选值：
  • scroll ：随页面滚动
  • fixed ：不随页面滚动

---

二，背景图片式的按钮练习

• 出现的问题：首次进行浏览器访问的时候，会出现图片有一个非常快的闪烁的现象，这种闪烁会照成用户体验不佳

• 产生的原因：背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是我们外部的资源并不是同时加载的，浏览器会在资源使用时才会去加载资源。上面的练习，一开始浏览器只会加载link.png。由于hover和active两个状态么有马上触发，所以hover.png和active.png并不会立即加载。当hover被触发时，才会加载hover.png。当active被触发时，才会加载active.png。
  而图片加载需要一定的时间，所以在加载和显示之间会有一段时间，背景图片无法显示，导致出现闪烁

• 问题解决：可以把三种不同状态的按钮放在同一张图片中，这样三种样式的按钮会同时加载，通过background-positon来改变位置，切换显示效果。其类似于偶的另一篇文章涉及的内容：http://www.jianshu.com/p/24198346c79b。
  这种技术叫作图片整合技术（CSS-Sprite(雪碧图)）

• 图片整合技术（CSS-Sprite）的优点：

  • 将多个图片整合到一个图片里，浏览器发送一次请求，就可以同时加载多个图片，提高访问效率，提高用户体验。
  • 将多个图片整合成一张图片，减少图片的总大小，提高请求速度，增加用户体验（三张图需要三个颜色表，一张图只需要一个颜色表，这就是为什么明明同样的三张图片 放在同一个图片中大小会减小了）

---

三，背景的简写属性

background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。不设置的值会采用默认值

例如：
background: green url(1.jpg) no-repeat center center fixed;

---

四，IE6的PNG的修复

问题描述： IE6对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示

• 问题解决：

• 1.用PS把图片格式改成PNG8，但是，图片的清晰度会有所下降
• 2.使用JS来解决问题，需要向页面引入一个外部的JS文件

JS.png

---

五，条件 hack

有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，这时就可以使用CSS hack来解决问题

CSS hack实际上指的是一段特殊代码，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码

• 条件hack只对IE浏览器有效，其他的浏览器都会将它识别为注释(IE10以上也不支持了)

当前IE版本为IE6


该标签会在IE9及以下的浏览器中显示

---

六，属性 hack

下面以背景颜色举例只是假如，并不是实际情况就是这样

• 在样式面前添加'_'，则该样式只有IE6及以下浏览器才可以识别

_background-color:red;

• 在样式面前添加'*'，则该样式只有IE7及以下浏览器才可以识别

*background-color:red;

• 在样式面前添加'\9'，则该样式只有IE6以上的浏览器可以识别

background-color:red\9;

• 在样式面前添加'\0'，则该样式只有IE8以上的浏览器可以识别

background-color:red\0;

CSS hack不到万不得已尽量不要使用，因为不太好，且维护起来麻烦