首页 > 代码库 > 给网页添加背景图像总结
给网页添加背景图像总结
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文件代替文本
给网页添加背景图像总结