CSS：在所有屏幕尺寸上完美叠加两个图像答案

【问题标题】：CSS: Overlay two images perfectly on all screen sizesCSS：在所有屏幕尺寸上完美叠加两个图像
【发布时间】：2017-01-31 20:47:08
【问题描述】：

我有两张图片。一个是圆边的图片，另一个是圆框的图片。我想将相框放在图片上，使其看起来像是单个图像。我正在努力使用 CSS 来做到这一点，因为在不同的屏幕尺寸上，它不会保持不变。

这是我的 HTML：

<div class="image">
    <img src="picture.png" id="profile"/>
    <img src="frame.png" id="frame"/>
</div>

我的 CSS：

div.image   {position: relative;}

img#profile {width: 250px;
            border-radius: 50%}

img#frame   {width: 250px;
            position: absolute;
            z-index: 100;}

我希望结果看起来像这样（蓝色是图片#profile，橙色是框架#frame：

此外，无论屏幕大小如何，这都需要保持这种状态，因此使用left 值实际上不起作用。

使用上面的标记，图像是这样做的：

我该如何解决这个问题？

【问题讨论】：

对 img#frame 使用填充，无需设置左侧或顶部
填充效果非常好。也许可以向我解释这是为什么？
@ALR 你也可以在 img#frame 上使用 left:0 [jsfiddle.net/8ogs98pz] 抱歉 img 质量不好。

标签： html css

【解决方案1】：

您没有提供任何图片。所以，我使用了css样式。您可以删除背景颜色并添加您的图片网址。

div.image {
    position: relative;
}
img#profile {
    width: 250px;
    height: 250px;
    background: blue;
    border-radius: 50%;
    z-index: 100;
    left: 10px;
    top: 10px;
    position: absolute;
}
img#frame {
    width: 270px;
    height: 270px;
    background: tomato;
    border-radius: 50%;
    z-index: -1;
}

JSFIDDLE

【讨论】：

【解决方案2】：

每次更改大小时都需要自行修复。

div.image {
position: fixed;
margin: 100px;
}
img#profile {
width: 250px;
height: 250px;
background: skyblue;
border-radius: 100%;
z-index: 100;
position: absolute;

}
img#frame {
width: 270px;
height: 270px;
background: orange;
border-radius: 100%;
z-index: -1;
position: absolute;
top:-10px;
left:-10px;
}

【讨论】：