css - 如何使用 CSS 将一个图像置于另一个图像之上？

Question

无论浏览器(重新)大小如何，我都希望实现以下效果:

图像被设置为灵活的，因此，每个图像都作为最大宽度声明为:100%。

http://jsfiddle.net/rgdrqbg4/

CSS:

img {
    max-width: 100% !important;
    vertical-align: middle;
}

.home-video {
    position: relative;
    width: 57.291666666667%;
}

.video-placeholder {
    position: relative;
    left: 0;
    top:0;
}

.play-video {
    position: absolute;
    left: 32.545454545455%;
    top: 22.508038585209%;
}

有人可以指出一些方向，或者说出一些常用的技术来叠加两个图像，同时保持它们绝对居中，而不管视口(viewport)宽度如何？

Answer 1

一种常用的技术是将top和left设置为50%，并设置margin-top和margin-left 图片的 height 和 width 的负一半。

试试这个:

.play-video {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -97px;
}

工作 JSFiddle 示例:http://jsfiddle.net/rgdrqbg4/1/

更新

您还可以将top、left、right和bottom设置为0 并将 margin 设置为 auto 以自动计算使图像居中所需的边距。

.play-video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

工作 JSFiddle 示例:http://jsfiddle.net/rgdrqbg4/5/

这仅在内部图像小于包裹它的图像时才有效。

更新

您正在为 .home-video 设置 width。在视口(viewport)中的某个点，容器的宽度比图像的宽度大，因此黑框根据容器而不是父图像居中。要使 .home-video 容器与其较大的图像具有相同的 width，您可以使用以下方法:

我向黑框添加了 30% 的 width，这样它也可以随着较大的图像缩小。

.home-video{
    display: inline-block;
}
.play-video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 30%;
    margin: auto;
}

然后移除你之前设置的width。

工作 JSFiddle 示例:工作 JSFiddle 示例:http://jsfiddle.net/rgdrqbg4/9/