Question

我正在创建一个网站，我的页面顶部有一个图像。图像大小为1920x650像素。我正在尝试正确编码，并想知道将图像放在div中的最佳做法是什么，标题文字覆盖图像？我希望图像的宽度始终为100％。

目前，我已尝试使用此代码，但当图像位于width:100%, and max-height: 600px;时，div的大小会切断图像的底部，并在标题文本的底部进行对接。我认为它与标题文本的边缘有关。我使用margin-top: -150px;作为标题，以便在我希望它覆盖在图像上的位置实现文本。这是我的代码：

HTML：

<div id="welcome">
<img src="img/welcome.jpg" alt="Welcome">
<h2>Welcome to my website</h2>
</div>

使用css：

#welcome{
width:100%
max-height: 600px;
overflow: hidden;
}
#welcome img{
width: 100%;
}
#welcome h2{
margin-top: -150px;
color: #B0171f;
}

如果我从标题中删除margin-top: -150px;，则图片会填满div。任何帮助将得到我想要实现的目标。先感谢您。

Answer 1

您可以将图片设置为background div welcome。调整background-position以将图片放置在div中的所需位置使用css属性 background-position

HTML

<div id ="welcome">
<h2>Welcome to my website</h2>
</div>

CSS

#welcome {
    width:100%;
    height: 600px;
    overflow: hidden;
    background:url('http://media1.santabanta.com/full1/Football/Football%20Abstract/football-abstract-9a.jpg') no-repeat;
}
#welcome h2 {
    color: #B0171f;
}

DEMO

详细了解background-position

Answer 2

您应该使用头寸而不是负边距：

#welcome{
width:100%
max-height: 600px;
overflow: hidden;
position: relative; /* applied for parent div */
}
#welcome img{
width: 100%;
}
#welcome h2{
position: absolute;
top: 50px; /* change what position you need */
z-index: 2; /* higher than image layer */
color: #B0171f;
}

Answer 3

使用CSS background-image属性，您可以使用非常少的代码实现此目的。只需将它作为h2本身的背景图像。

HTML：

<h2 id="welcome">Welcome to my website</h2>

CSS：

<style>
#welcome {
    width:100%;
    background-image: url("http://www.tilemountain.co.uk/media/catalog/product/cache/1/image/1000x/040ec09b1e35df139433887a97daa66f/p/r/prismatics_prv4_victorian_maroon_200x100-1600.jpg");
    color: #B0171f;
}
</style>

http://jsfiddle.net/#&togetherjs=DfmkLBOPVu

我不认为这与您目前的目标相同，但它是您尝试做的更好的基础。

最佳做法是使用图像作为背景，在div中包含重叠标题

3 个答案: