码迷,mamicode.com
首页 > Web开发 > 详细

给网页添加背景图像总结

时间:2017-03-17 00:20:47      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:ssr   嵌入   部分   gnu   锯齿   radius   引擎   splay   ack   

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文件代替文本

 

给网页添加背景图像总结

标签:ssr   嵌入   部分   gnu   锯齿   radius   引擎   splay   ack   

原文地址:http://www.cnblogs.com/x-blank/p/6562032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!