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

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

转载作者：太空宇宙更新时间：2023-11-03 19:11:20

我正在尝试用 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>