background-img|CSSer课堂

优雅的层叠纹理-全屏自适应背景图片

Published 八月 4th, 2009 by San in User Experience, Web Standard | 1 Comment »

帖子的起因是一个客户的单子，然后想到使用CSS来控制img的宽度，使用百分比来控制图片的width达到全屏背景的效果。
自适应宽度的背景图其实是html的图片。

需要注意的几点:

作为全屏背景图片需要模糊处理过，这样的的图片在放大后失真效果不明显。
零活使用透明滤镜的透明度参数
position的同时，需要合理的指定对应的z-index，z-index可以为负值。
需要考虑图片缩放比率，我这里以1024:768为准

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>优雅的透明层叠效果</title> <style type="text/css"> *{ margin:0; padding:0; border:0; list-style:none; } html,body{ height:100%; overflow:hidden; } body { position:relative; text-align:center; font-size:12px/120% Verdana; color:#b7b7b7; background:#333 url(http://blog.owncsser.com/wp-content/uploads/2009/08/bg.gif); z-index:0; } /* bg */ .bg{ position:absolute; top:0; left:0; width:100%; height:100%; background:#396F94; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; z-index:-1; } .bg img{ width:100%; } </style> </head> <body> <div class="bg"><img src="http://blog.owncsser.com/wp-content/uploads/2009/08/bg1.jpg" width="0" /></div> </body> </html>

提示：你可以先修改部分代码再运行。

例子中所用到的图片：
背景纹理：
纹理背景

根据屏幕大小自适应的图片
大幅背景

Tags: background-img, position, z-index

CSSer课堂

优雅的层叠纹理-全屏自适应背景图片

终极目标:验证CSS和(x)Html

课程分类

课程回顾

课堂讨论

My Links

SEO Links

大学课本

CSSer课堂

优雅的层叠纹理-全屏自适应背景图片

终极目标:验证CSS和(x)Html

课程分类

课程回顾

课堂讨论

本章词汇

My Links

SEO Links

大学课本