html - 如何应用标题图像背景？

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

您可以使用z-indexcss 的属性。

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>