CSS

Question

如果您仔细阅读这个问题，您会发现这不是一个重复的问题。这是关于具有全高度图像显示的响应式背景上的图像。与其他问题相关的答案在这里没有用。感谢 jacob 的简单解决方案。

问题：

我有一个 DIV 具有响应式背景。我正在尝试在 DIV（或背景，如果您愿意）上放置居中的 png "logo"。这就是我所拥有的：

.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 张背景图片。 Multiple background images 在 CSS 中：

    .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 属性中排在第一位。

CSS - 在 DIV 上以响应式背景和全高图像显示为中心的图像

CSS - centered image over a DIV with responsive background and full height image display

html

image

centering