我想做这样的。查看图片
这里的圆是一个图像。
我试过这样做。但当我调整窗口大小时,图像圆圈被移动改变了位置。我怎样才能解决这个问题。
<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高度增加,但图像是相同的高度。如果可能的话,你也可以帮助我在这个问题上。
这是我认为你正在寻找的解决方案。
如果你使用 %
那么在移动设备上的输出将是不同的。
在类 .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>
如果你想让它一直处于固定位置,那么使用%可能不是最好的主意。复制并粘贴下面的代码,而不是你的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
}
对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;
}