Question

我正在尝试将两个图像叠加在一起，我发现最简单的方法是将一个图像设置为标头标记的背景图像，然后将另一个图像设置为标头标记本身。

但是，我要设置的背景图像是需要完整显示的横幅，而作为背景图像，其周围标签的大小仅适合其上方第二个图像的大小。

我想保持横幅/背景图像的大小响应，所以我不能只设置特定的高度和宽度。

如何使背景图像充当横幅？（虽然仍然将我的第二张图片分层放在上面？）

HTML

<header>
    <img src="topImage.jpg" />
</header>

CSS

header{
    background-image: url('bannerImage.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/*This image is smaller than the background banner image*/
header img{
    display: block;
    max-width: 20%;
    height: auto;
}

我正在寻求一个CSS解决方案，但如果适用，也可以使用JavaScript。请不要Jquery。

编辑：对不起，当我说div我只是意味着我应用了样式的标签。更新了问题以反映这一点。

Answer 1

您可以在页面正文中使用图像并对其应用Z-index（横幅图像）。

//Banner image
.imgOne
{
     position: absolute  !important;
     left: 0px;
     top: 0px;
     z-index: -1 !important;
     width:100%;
     height:100%;
}

//Second overlaying image
.imgTwo
{
     position: relative;
     width:30% !important;
     float :left; //Optional; you could specify left and top for position
     height:30% !important;
}

如果你在第二张图片上使用浮点数你可以看到结果，如果你不想让其他元素漂浮在第二张图像周围，你可以使用clear属性来处理下面这些元素。

p {
    border: 1px solid red;
    clear: left;
}

小提琴：https://jsfiddle.net/e1hysrce/

Lmk如果它适合你或你找到更好的分享。

CSS响应背景图像作为全尺寸图像

1 个答案: