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

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

通过使用background-image <div style="background-image:url(/images/newLocation.jpg); height:580px;">

在div中添加图像的高度来解决图像被切断的问题

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

Answer 1

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

只需将div设置为与背景图像相同的宽度和高度，并将其设置为文本对齐中心。

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

将背景图像设置为无重复，并将位置置于左上方。

Simples。

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

<div>
    Text here
</div>

Answer 2

我建议你添加这两条规则：

position: relative到div;
position: absolute到段落。

这样您就可以轻松地在其父级中移动段落。

选中此jsFiddle：我刚刚将top: 100px应用于该段落，以便将其垂直居中于div。

CSS背景图片放置

2 个答案: