0

我在这里有这个网站http://cowelllaserhair.com/index.php你会注意到有一个带有 div 的段落像这样包裹着它......

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

但它切断了图像，我也希望像这样有更高的图像

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

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

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

4

2 回答 2

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>
于 2012-08-31T16:11:03.787 回答
0

我建议您添加以下两条规则：

  • position: relative到div;

  • position: absolute到段落。

这样，您可以轻松地将段落移动到其父级中。

检查这个jsFiddle：我刚刚应用top: 100px到该段落，以便将它垂直居中在div.

于 2012-08-31T16:05:49.987 回答