html背景图片过大时显示有关问题
日期：2014-05-16 浏览次数：20599 次
html背景图片过大时显示问题，求助
情况是这样的，老板给了一张效果图，大小是2186 x 1059的，现在老板的需求是，当屏幕分辨率较小的时候，只显示中间不主要内容，但当屏幕分辨率较大，根据分辨率显示跟着变大
------解决方案--------------------
这样就行了～～background-position: center top
------解决方案--------------------
用这样的
------解决方案--------------------
楼上几个办法都不错，作为背景实现，还可以用下面方法实现：
css:
.div{ position:relative; width:1000px;}
.div2{ position:absolute; left:-593px; top:0px;}
html:
<div class="div">
<div class="div2">图片地址</div>
</div>
情况是这样的，老板给了一张效果图，大小是2186 x 1059的，现在老板的需求是，当屏幕分辨率较小的时候，只显示中间不主要内容，但当屏幕分辨率较大，根据分辨率显示跟着变大
css
html
背景图片
不同分辨率
自适应
------解决方案--------------------
这样就行了～～background-position: center top
------解决方案--------------------
<!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>
div,body,html {
margin:0;
width:100%;
height:100%
}
.main{background:url(http://news.mydrivers.com/img/20080628/07552404.jpg) no-repeat; background-position:top center;}
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>
用这样的
------解决方案--------------------
楼上几个办法都不错，作为背景实现，还可以用下面方法实现：
css:
.div{ position:relative; width:1000px;}
.div2{ position:absolute; left:-593px; top:0px;}
html:
<div class="div">
<div class="div2">图片地址</div>
</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
