Question

如何将图像集中放在另一张图像上？我尝试了很多类似问题的答案，但没有一个能为我工作。

基本上我需要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%;
}

Answer 1

嗯，这是我尝试满足问题的要求 - 这不仅仅是将图像/元素放在另一个上，而是以响应的方式实现它。

要点

在底部填充上使用百分比值使元素的高度符合其宽度¹。
在top，right，left，bottom抵消以及width和height属性^{<上使用百分比值强> 2}
在border-radius上使用较高的像素值而不是百分比 - 例如1000px。
排名第四......好吧，最后一步是trial and error！

Example on JSFiddle

*, *: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>

¹ _{查看this topic的响应式容器部分。}

² _{为了找到确切的值，我们可以将事物定位/调整为绝对长度 - 如px - 然后只测量相对于彼此的事物。}

Answer 2

如果您想要响应，您必须删除所有固定（像素）单位并使用百分比，除非您计划根据屏幕大小设置多个版本，在这种情况下，您可以使用媒体查询。

所以，我们的想法是使用填充，边距等百分比......并且我已经用百分比填充替换了固定的宽度/高度定义，这使得圆圈响应。看看你是否可以为心脏做同样的事情（我认为使用图像可能会为你节省很多时间）。

＆＃13;

#logo {
  width: 50%;
  height: 50%;
  position: relative;
}
#heart {
  display: block;
  position: absolute;
  margin: 18% 14%;
  z-index: 1;
  width: 70%;
  height: 70%;
}
#heart-container {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /*bottom:0;
        right:0;*/
  z-index: 1;
  padding: 50%;
}
#heart-container {
  border-radius: 50%;
  behavior: url(PIE.htc);
  padding: 50%;
  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%;
}

＆＃13;

<div id="logo">
  <div id="heart-container">
  </div>
  <div id="heart">
  </div>
</div>

＆＃13;

小提琴：http://jsfiddle.net/fzgd6cv8/

如果您无法为心脏做同样的事情，请告诉我。

更新

这是我对心灵的尝试，可能需要一些数字调整：

＆＃13;

#logo {
  width: 50%;
  height: 50%;
  position: relative;
}
#heart {
  display: block;
  position: absolute;
  margin: 20% 14% 0 9%;
  z-index: 1;
  width: 70%;
  height: 70%;
}
#heart-container {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /*bottom:0;
        right:0;*/
  z-index: 1;
  padding: 50%;
}
#heart-container {
  border-radius: 50%;
  behavior: url(PIE.htc);
  padding: 50%;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 60%;
  top: 0;
  width: 60%;
  padding-top: 100%;
  background: red;
  -moz-border-radius: 150% 150% 0 0;
  border-radius: 150% 150% 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%;
}

＆＃13;

<div id="logo">
  <div id="heart-container">
  </div>
  <div id="heart"></div>
</div>

＆＃13;

http://jsfiddle.net/fzgd6cv8/2/

将图像集中放置在具有响应宽度和高度的另一图像上

2 个答案:

要点

更新