width: 100%; height: 100%;的问题
在CSS中，如果我把.content的宽度设置为100%，即如下代码所示，
.content
{
width: 100%;
height: 4040px;
background: url("../images/mooc.png") center no-repeat;
}
则背景图片显示不完整，浏览器窗口没有水平滚动条。
如果我把.content的宽度设置为1920px，背景图片才显示完整，并且浏览器窗口有水平滚动条。
.content
{
width: 100%;
height: 4040px;
background: url("../images/mooc.png") center no-repeat;
}
这是为什么呢？我使用的显示器分辨率是1920×1080。
我使用的图片mooc.jpg，大小是1900×4040（经过自己的修改）。
附完整代码如下。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>4-1-示例</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
html,
body
{
width: 100%;
height: 100%;
}
.content
{
/*width: 100%;*/
width: 1920px;
height: 4040px;
background: url("../images/mooc.png") center no-repeat;
}
.opacity
{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("../images/opacity.png");
}
.login
{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 360px;
height: 360px;
background: url("../images/login.png") no-repeat;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="opacity"></div>
<div class="login"></div>
</body>
</html>33
收起
正在回答
2回答
同学你好， 可能因为你的背景图片比content容器大，所以不能完全显示出来。
建议： 可以给图片设置background-size:100%；属性，让图片完全显示在容器中哦。
这个属性在CSS3阶段会有详细的讲解， 同学目前了解一下就可以了
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星