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

时间:2015-12-22 20:27:58

标签: javascript html css image background-image

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

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

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

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

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我只是意味着我应用了样式的标签。更新了问题以反映这一点。

1 个答案:

答案 0 :(得分:0)

您可以在页面正文中使用图像并对其应用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如果它适合你或你找到更好的分享。