不同分辨率下显示不同宽度的DIV背景图片效果

2014-02-19 16:33:48来源:西部e网作者:icech
随着设备的发展,不同分辨率的显示器和设备也越来越多。如何让一个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>西部e网 - (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>
代码的重点在background的center属性上,控制了背景图片居中显示的效果,所以在width:100%的情况下,不论宽度是多少,只会从中间向两边扩散显示。
关键词:分辨率

赞助商链接:

齐乐娱乐