如何将图像居中放置在另一个图像上？我尝试了很多类似问题的答案，但是没有一个对我有用。
基本上我需要将2张图片变成1张
它必须是响应性的（因此，当不同屏幕尺寸的设备访问网页时，尺寸会自动更改。）
当用户调整屏幕大小（或网页窗口大小等）时，心脏和环的位置应保持彼此相同
我正在尝试使用css绘制圆环和心脏，但是如果您确实需要图片替换圆环或心脏，也可以。
这是我的代码，我已经工作了几个小时了，但是还没有好运。http://jsfiddle.net/4u6tfacw/
谢谢你。
这是我的代码
<div id="logo">
<div id="heart-container">
</div>
<div id="heart">
</div>
</div>
#logo {
width: 50%;
height: 50%;
}
#heart {
display: block;
position: absolute;
top: 70px;
left: 30px;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
width: 220px;
height: 220px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 90px;
top: 0;
width: 90px;
height: 130px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
好吧，这是我要满足这个问题的要求，这不仅是关于将图像/元素放在另一个图像/元素上，而且是关于以响应方式实现这一要求。
top，right，left，bottom偏移以及width和height性能2。border-radius代替百分比1000px。*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#logo {
width: 50%;
/* height: 50%; */
position: relative;
}
#logo:after {
content: "";
display: block;
padding-bottom: 70%;
}
#heart {
position: absolute;
top: 26%;
left: 35%;
z-index: 1;
width: 70%;
height: 100%;
}
#heart-container {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 70%;
/* height: 70%; */
border-radius: 50%;
behavior: url(PIE.htc);
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart-container:after {
content: "";
display: block;
padding-bottom: 100%;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 39.130434782608695652173913043478%;
height: 56.521739130434782608695652173913%;
background: red;
-moz-border-radius: 1000px 1000px 0 0;
border-radius: 1000px 1000px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: -38.9%;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}<div id="logo">
<div id="heart-container"></div>
<div id="heart"></div>
</div>1。 查看本主题的“响应式容器”部分。
2 要找到确切的值，我们可以按绝对长度定位/调整大小（例如px-），然后仅相对于彼此进行测量。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句