Question

如果你仔细考虑这个问题，你会注意到它不是一个重复的问题。这是关于响应背景的图像，具有全高图像显示。与其他问题相关的答案在这里毫无用处。感谢雅各布的简单解决方案。

问题：

我有一个具有响应背景的DIV。我正试图在DIV（或背景，如果你愿意）上放置一个居中的png“徽标”。这就是我所拥有的：

.divWithBG {
    background-image: url(...);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 45.45%; /* (h/w) x 100 */
    margin-bottom: 30px;
}
.divWithBG img{
    display: block;
    margin: 0 auto;
}

¿我需要做什么才能将图像放在div中？以纵向和横向为中心。

非常感谢提前。

Answer 1

你可以简单地使用2张背景图片。 CSS中的Multiple background images：

    .divWithBG {
        background-image: url("http://lorempizza.com/380/240") , url("http://lorempizza.com/2000/2000");
        background-size: 50%, contain;
        background-repeat: no-repeat, no-repeat;
        background-position:center;
        width: 100%;
        padding-top: 45.45%; /* (h/w) x 100 */
        margin-bottom: 30px;
    }

<div class="divWithBG"></div>

您希望位于顶部的背景图片位于background属性中。

以DIV为中心的图像，具有响应背景和全高图像显示

1 个答案: