给网页添加背景图像总结

Posted 2020-09-05

1.固定宽度和可变宽度的圆角框

方法一：适用于新型浏览器，直接用border-radius属性

方法二：适用于旧版浏览器，IE6等

对于固定宽度圆角框，需要有两个图像，一个图像用于框的顶部，一个用于框的底部。

对于可变宽度圆角框，需用到滑动门技术（随着框尺寸的增加，大图像有更多的部分显露出来，这样就实现了框扩展的效果），这个方法需用到四个图像（top-left,top-right,bottom-left,bottom-right）,bottom-left应用于主框div，bottom-right应用于外面的div，top-left应用于内侧的div，top-right应用于标题

对于可变宽度山顶角，创建曲线形的位图角蒙板，盖住正使用的背景颜色，就形成了曲线形框的效果，对于小曲线效果较好，但对于大曲线，会出现锯齿。和可变宽度圆角框一样，需要4个元素来应用4个角蒙板。

方法三：使用多个背景图像，用的方法也是四个背景图像，优点是可省去无用标记，Firefox和Opera的最新版本支持这个属性，IE不支持。

方法四：使用css3新特性boreder-image，这个属性允许指定一个图像作为元素的边框，图像被分成9部分，这9部分怎么分，要依据border-image设置，有3种方式，PX，百分数。其他详见border-image属性介绍（http://www.w3school.com.cn/cssref/pr_border-image.asp）

2.投影

方法一：适用于新型浏览器，直接用box-shadow属性（http://www.w3school.com.cn/cssref/pr_box-shadow.asp）

方法二：适用于所有浏览器，实现方法为，首先将一个大的投影图像应用于容器div的背景，然后使用负的外边距便宜这个图像

方法三：来自Clagnut的投影方法，不使用负的外边距偏移图像，而是使用相对定位来偏移图像。

3.不透明度

方法一：使用filter属性（http://www.runoob.com/cssref/css3-pr-filter.html）

方法二：background-color：用rgba设置

PNG透明度

a.PNG文件格式最大的优点之一是它支持alpha透明度，第一个规则使用专有的过滤器加载PNG并应用alpha透明度，原来的背景图像仍然会显示，所以第二个规则是隐藏原来的背景图像。

b.使用IE PNG fix技术，需使用专有css扩展-行为（behavior）

4.CSS视差效果

视差滚动，实现方法是创建几个不同的背景图像，每个背景图像有不同的位置。

5.图像替换

使用文本图像时，不愿意将其直接嵌入页面中，就有了图像替换。图像替换，是先像平常一样添加文本，然后使用css隐藏文本并在它的位置上显示背景图像。这样，搜索引擎依然可以搜索HTML文本，如果禁用css，文本也会显示。

实现方法

a.FIR，最早最流行的，把要替换的文本放在span标签内，然后将替换图像作为背景图像应用于标题元素，并将span的display值设为none。缺点是，许多屏幕阅器会自动忽略display值为none或visibility值为hidden的元素，因此会完全忽略这个文本。

b.Phark，对标题进行非常大的负值文本缩进，缺点是在关闭图像但是打开css时文本也不会显示。

c.sIFR,用flash文件代替文本