Question

我希望标题有背景图像。我希望背景图像的宽度为100％，图像的其余部分为高度（对于任何维持高度的宽高比）..以及顶部的标题元素。

我试图申请..

 header {
 Background: url(background.jpg) no-repeat;
 background-size: 100% auto;
 }

但这会使背景停在标题元素停止的位置（导航菜单）..我希望背景图像一直向下，直到图像本身完成。如果这没有任何意义，我很抱歉。

Answer 1

如果我已正确理解这一点，则标题元素的高度小于图片的高度。

header {
 Background: url(background.jpg) no-repeat;
 background-size: 100% auto;
 height: <height of the image in pixels>px
}

这将使两个高度相同，以便不会切断图像

Answer 2

您可以使用css的z-index属性。

CSS：

header
{
    position: absolute;
    top: 0px;
    right: 0px;
    height: auto;
}
span
{
    z-index: 2;
}
img
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

HTML：

<header><span>Your text here</span><img src='Your image.JPG'/></header>

如何应用标题图像背景？

2 个答案: