叠影

Question

我想做这样的。查看图片

这里的圆是一个图像。

我试过这样做。但当我调整窗口大小时，图像圆圈被移动改变了位置。我怎样才能解决这个问题。

<div class="main">
    <img src=''>
    <div>Text Text Text</div>
</div>


.main {       
        background-color: #fbd449;
        border-radius: 4.5px;
        padding: 0.5rem 3rem;
        position: relative;
        margin-left: 9rem;
}

img {
        position: absolute;
        background-color: chocolate;
        width: 9rem;
        height: 9rem;
        top: -12%;
        border-radius: 50%;
        left: -20%;
}

此外，对于较小的屏幕，div高度增加，但图像是相同的高度。如果可能的话，你也可以帮助我在这个问题上。

Answer 1

这是我认为你正在寻找的解决方案。

如果你使用 % 那么在移动设备上的输出将是不同的。

在类 .main 和 img 您可以根据自己的选择改变高度和宽度。

.main {
  background-color: #fbd449;
  border-radius: 4.5px;
  padding: 0.5rem 3rem;
  position: fixed;
  margin-left: 9rem;
  top: 25px;
  left:-5px;
  height: 100px;
  width: auto;
  overflow: hidden;
}

img {
  position: fixed;
  background-color: chocolate;
  width: 9rem;
  height: 9rem;
  top: 12px;
  border-radius: 50%;
  left: 40px;
}

<div class="main">
  <img src=''>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Answer 2

如果你想让它一直处于固定位置，那么使用%可能不是最好的主意。复制并粘贴下面的代码，而不是你的CSS，看看它是否能帮助你。它不是你的共享图像的精确复制，但你可以玩正确的大小和定位，让它为你的网站。

.main { 
  background-color: #fbd449;
  border-radius: 4.5px;
  padding: 0.5rem 3rem;
  position: relative;
  margin-left: 9rem;
  width:12rem;
  height: 3rem;
}

img {
  position: absolute;
  background-color: chocolate;
  width: 7rem;
  height: 7rem;
  margin-left:-4rem;
  margin-top:-2rem;
  border-radius: 50%;
}

.main > div {
  padding-left:4rem
}

Answer 3

对CSS做了一些修改

.main {       
        background-color: #fbd449;
        border-radius: 4.5px;
        padding: 0.5rem 5rem 0.5rem 9rem;
        position: relative;
        margin:2rem 9rem 0;
        width:100%;
        height:7rem;
        border-radius:10px;
        box-sizing:border-box;
}

img {
        position: absolute;
        background-color: chocolate;
        width: 9rem;
        height: 9rem;
        top: -1rem;
        border-radius: 50%;
        left: -1.5rem;
}