CSS 背景图片放置

Question

我这里有这个网站http://cowelllaserhair.com/index.php你会注意到有一个段落，周围环绕着一个 div，就像这样......

<div style="background-image:url(/images/newLocation.jpg);">
<p style="text-align:center;">
Text here
</p>
</div>

但它切断了图像，我也希望图像更高 like this

这可能吗？我该怎么做呢？

解决了图像被截断的问题，方法是在我的 div 中添加图像高度和背景图像 <div style="background-image:url(/images/newLocation.jpg); height:580px;">

现在唯一要做的就是在图像中获取文本。转到http://cowelllaserhair.com/index.php看看我在说什么。

Answer 1

你真的不需要'p'标签。

只需将div设置为与背景图片同宽同高，并居中对齐即可。

然后在 DIV 的顶部设置一些填充，以便您的文本位于您需要的位置(确保从 DIV 的高度中减去您使用的顶部填充量。

设置背景图片不重复，位置在左上。

简单。

div {
    width:XXXpx
    height:XXXpx
    padding-top:20px;
    background:url(/images/newLocation.jpg) no-repeat 0 0;
    text-align:center;
}

<div>
    Text here
</div>