我想要达到的目标: image link
我的代码目前的样子:
.half-circle {
background-color: white;
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>
我试过使用白色背景和 500 半径的填充,但它会将文本向下推。
最佳答案
可以看看radial-gradient()
并稍微调整尺寸
.half-circle {
min-height: 12vw;
padding-bottom: 4%;
background: radial-gradient(circle at top, white 17vw, transparent 17.1vw)
}
.half-circle img {
display: block;
margin: auto;
max-width: 15vw
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should'nt be moved</div>
关于CSS半圆背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55189031/