我创建了一个div容器。这个容器应该得到一个背景图像。图像为1200 x 64像素。如果我在div容器中写一些东西,应该完整显示1张图片。如果我在70px的高度上写文字,应该完全显示2张图片。目前,我必须给容器一个固定的高度
*{
margin: 0px;
padding: 0px;
}
.div_mit_background {
margin-right: auto;
margin-left: auto;
width: 1200px;
background-image: url('http://img3.fotos-hochladen.net/uploads/background7j0b6tzhl1.png');
height: 200px;
}
p{
margin-left: 64px;
color: white;
padding-top: 20px;
}

<html>
<head>
<link href='index.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="div_mit_background">
<p>
Here is some content.
</p>
</div>
</body>
</html>
&#13;
答案 0 :(得分:2)
一种可能的解决方案,如果您想要做的就是在新行的情况下显示完整的背景图像,请执行以下操作:
padding-top
line-height:64px;
,以便该行的高度与背景图像的高度相同,并且将显示一个图像或两个(不是一个半等)。 )这是p标签的更新CSS。
p{
margin-left: 64px;
color: white;
line-height:64px;
}
并且对于左边或右边的填充或边距,您可以根据需要进行设置。
并且不要忘记将.div_mit_background
的高度设置为height:auto;
而不是200px。