gpt4 book ai didi

css - 如何让盒子的内容溢出背景

转载 作者:太空宇宙 更新时间:2023-11-03 19:11:20 27 4
gpt4 key购买 nike

我正在尝试用 CSS3 完成这样的事情:

enter image description here

紫色圆圈是图片,紫色较浅的是 div 背景。

我的第一个猜测是负填充,但快速搜索告诉我这是不允许的。正常溢出不起作用,因为我希望它从背景上方开始并在背景下方结束。我对 CSS 很陌生,所以我真的不知道如何做到这一点。

最佳答案

使用相对定位,顶部,可能还有左侧。

position: relative;
top: -25px;
left: -15px;

相对定位是在 CSS 2.0 中定义的。这意味着不需要 CSS3,它几乎适用于所有浏览器,包括移动设备。

您还必须为 div 设置高度和上边距。

这是我的测试文件和输出。

<html>
<head>
<style type="text/css">
.purpleRectangle{
background: #b93b8f;
height: 200px;
margin-top: 30px;
}
img{
position: relative;
top: -25px;
left: 15px;
}
</style>
</head>
<body>
<div class="purpleRectangle">
<img src="circle.png" />
</div>
</body>
</html>

enter image description here

关于css - 如何让盒子的内容溢出背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8201497/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com