web前端学习——css背景

1.背景图片

使用background-image来设置背景图片；

• 语法：background-image:url(相对路径);
  这个相对路径是相对于自己本身，例如styles文件夹里的css文件写有该属性，则其相对路径为background-image:url(../images/1.png);
• 如果图片大小大于元素则会默认显示图片的左上角；
• 图片和元素一样大就会全部显示；
• 如果背景图片小于元素大小，则会默认将背景图片平铺（一直重复）以充满元素。
• 背景颜色和背景图片一般都是同时设置的，在图片未被加载出来时，可以先有个背景色，背景颜色永远在图片下面，作为背景图片的背景色，不会覆盖到背景图片上，只会在空隙处显示。
  那么怎么设置不重复图片或图片重复方式呢？
  使用background-repeat属性；
  例子：

.p1{
background-color:red;
background-image:url(../images/1.png);
background-repeat:no-repeat;//不重复
}

可选值：

• repeat：默认值，图片会双方向重复（平铺）。
• no-repeat:图片不会重复，有多大就显示多大的图片在元素上。
• repeat-x：图片在水平方向上（x轴）重复。
• repeat-y：图片在垂直方向上（y轴）重复。

2.背景图像的位置

图像默认是贴在页面的左上角显示的。
要怎么设置背景图像的位置呢？
可以通过background-position来设置背景图像位置。
可选值：

• 有五个参考值：top bottom left right center；
  使用方法：
  background-position:top left;这就是默认效果左上。
  该属性使用上面的两个值组合来进行位置设置，就像九宫格。（注意组合的逻辑，别：right left）
  如果只写一个值，那么第二个值就是默认center；
• 也可以直接指定水平方向(第一个值)和垂直方向（第二个值）的偏移量。（可使用百分比或者直接指定像素）
  background-position:100px 50px;
  偏移量的正负值：
  水平方向：如果偏移量为正值，那么就是向右移动指定的偏移量，如果偏移量为负值，则向左移动指定的偏移量。
  垂直方向：如果偏移量为正值，那么向下移动指定的偏移量。如果偏移量为负值，那么向上移动指定的偏移量。
  （负值用的会比较多，因为一些页面上的按钮都是用的雪碧图做背景，即几张图片合成的一张图，为了一次性加载全部效果，不用一个效果请求次图片，导致闪烁，延迟，所以按钮什么的效果都是一张图，转换效果就是更换位置。）

3.背景图片不随页面滚动而滚动

background-attachment可以用来设置背景图片不随页面一起滚动（看的博客就是这样，背景图片永远是固定的，就前面的文字在上下移动）
可选值：
scroll：默认值。背景图片随着窗口滚动。
fixed：图片背景不会随着页面滚动，会固定在一个位置
（注意：如果设置了background-attachment:fixed;那么background-position:center;设置的位置就会变为当前可见页面的中间，或其他设置时就是其他位置，比如页面很长时，本来看不到背景图片的，一设置了attachment，图片就会出现在现可见视图中）
一般不随窗口滚动的图片只设置给body，而不设置给其他元素，具体看要什么效果。
例子：

body{
background-color:red;//背景颜色
background-image:url(../images/1.png);//背景图片
background-repeat:no-repeat;//不重复
background-position:center center;//居中显示
background-attachment:fixed;//不随页面移动
}

4.背景属性的简写方式

设置一个背景要写这么多行代码，很麻烦，就可以使用简写属性。
background——通过该属性可以同时设置所有背景相关的样式，没有顺序要求，也没有数量要求，不写的就使用默认样式。
backgrounf:#bfe url(1.png) no-repeat center center fixed;
与其他简写属性一样，如果写在后面，其效果会覆盖前面分开设置的效果，未写的，就将采用默认值。

5.ie6png修复

注意：ie6对图片格式png24支持度不高，不能显示透明部分的效果。
ie6对png24：

火狐对png24：

解决方法：
1.使用png8代替png24，当时图片清晰度，效果变差。
2.使用JavaScript来解决，需要向页面中引入一个外部的JavaScript文件，然后再写一个简单的js代码。

<script type="text/javascript" src="DD_belatefixPNG_0.0.8a_min.js">script>

<script type="text/javascript">
DD_belatePNG.fix("img");//调用上面那个修复代码，括号内写的是选择器，看要修复哪。
script>

虽然该代码在任何浏览器运行都不会有问题，但是怎么指定其只在ie6里运行呢？
看下面css hack

6.CSS Hack

有一些情况，有一些特殊的代码我们只需要在一些特殊的浏览器（ie）中执行，而在其他浏览器中不需要执行，这时就可以使用CSS Hack。

CSS Hack实际上指的是一个特殊的代码。用于解决兼容性，这些代码只可以在某些浏览器中被识别，而在其他浏览器中不能被识别。通过这种方式来对一些特殊的浏览器设置特殊的代码。

1.条件Hack

条件hack只对ie浏览器有效（且ie10及以上都不再支持了），其他浏览器都会将其识别为注释。代码如下：

该p标签内容只会在ie10以下（不包括10）浏览器中显示；

上面的js代码套用条件hack

甚至为ie10以下浏览器专门建立样式表
<link rel="stylesheet" type="text/css" href="style/css.css" />//正常浏览器使用

因为放在正常样式表下，所有当在ie8中执行时，会执行第二个，也就是在条件hack中的那个；

2.属性Hack

以color为例解释属性hack语法：

• 在样式前添加一个 下划线
  _color:red;仅ie6认识；
• 在样式前添加 * 号
  *color:red;ie7及以下认识；
• 在后面添加 \0
  color:red\0;只有ie8及以上才认识；
• 在后面添加\9
  color:red\9;只有ie6及以上认识；

CSS Hack 最好不要用，因为对ie678等等的设置，维护起来比较麻烦，容易出错。

hack不仅ie有，火狐，chrome等都有，可以按照需求，搜索使用。