我无法获取 div 容器的完整背景图像。我想看到图片的高度为 100%，宽度为 100%。如果我在 html 代码中将图像添加为标签，它会完美运行，但我想在图像上写一些标题。我的意思是侧边栏的背景图像“标题侧边栏”。 这是 my Page +代码:
*{
margin: 0px;
padding: 0px;
color: black;
}
body{
background-image: url(bg.jpg);
height: 1500px;
}
section{
margin-top: 100px;
width: 1230px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 200px;
}
article{
background-color: #FBB9B7;
width: 800px;
height: 100%;
float: left;
padding: 20px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}
aside{
background-color: #FBB9B7;
width: 300px;
height: 100%;
float: right;
padding: 20px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}
.header-sidebar{
background: url(http://www.drlaureen.com/wp-content/uploads/2014/09/headline-sidebar.png) no-repeat;
height: 50px;
width: 100%;
text-align: center;
padding-top: 8px;
}<html>
<head>
<link href='index.css' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</article>
<aside>
<div class="header-sidebar">
Überschrift 1
</div>
</aside>
</section>
</body>
</html>最佳答案
在 body 中使用 background-size:cover 而不是定义高度和宽度
关于html - 显示 div 背景图像完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28098023/