Question

我创建了一个div容器。这个容器应该得到一个背景图像。图像为1200 x 64像素。如果我在div容器中写一些东西，应该完整显示1张图片。如果我在70px的高度上写文字，应该完全显示2张图片。目前，我必须给容器一个固定的高度

以下是my Page + the image，此处为代码：

＆＃13;

*{
    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;
}

＆＃13;

<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;

Answer 1

一种可能的解决方案，如果您想要做的就是在新行的情况下显示完整的背景图像，请执行以下操作：

从p tag的CSS中删除padding-top
将此添加到p标签的CSS：line-height:64px;，以便该行的高度与背景图像的高度相同，并且将显示一个图像或两个（不是一个半等）。）

这是p标签的更新CSS。

p{
    margin-left: 64px;
    color: white;
    line-height:64px;
}

并且对于左边或右边的填充或边距，您可以根据需要进行设置。

并且不要忘记将.div_mit_background的高度设置为height:auto;而不是200px。

希望它有所帮助。

div容器背景图像

1 个答案: