不同分辨率下显示不同宽度的DIV背景图片效果
内容摘要
随着设备的发展，不同分辨率的显示器和设备也越来越多。如何让一个DIV背景图在不同分辨率下显示合适的效果呢？
文章正文
随着设备的发展，不同分辨率的显示器和设备也越来越多。如何让一个DIV背景图在不同分辨率下显示合适的效果呢？下面有一个例子：
下面有两个不同分辨率下的同一个界面效果截图：
（图1：在宽度为1280px下的截图）
（图2：在宽度为1024px下的截图）
从图1我们可以看出，整体效果是在1280px宽度下的显示效果，粉色细线标出了1024px宽度应该显示的效果，图2就就这种效果。
HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>- （weste.net）</title>
<style>
body{ padding:0; margin:0; }
.bimg{ background:url(banner.jpg) top center no-repeat;
width: 100%;
height: 445px;
position: relative;
}
</style>
</head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>- （weste.net）</title>
<style>
body{ padding:0; margin:0; }
.bimg{ background:url(banner.jpg) top center no-repeat;
width: 100%;
height: 445px;
position: relative;
}
</style>
</head>
<body>
<div class="bimg"> </div>
</body>
</html>
<div class="bimg"> </div>
</body>
</html>
代码的重点在background的center属性上，控制了背景图片居中显示的效果，所以在width:100%的情况下，不论宽度是多少，只会从中间向两边扩散显示。
代码注释
[!--zhushi--]
作者：喵哥笔记
