Question

我正在尝试使用CSS3完成类似的事情：

enter image description here

紫色圆圈是图像，紫色背景是div背景。

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

Answer 1

使用相对定位，顶部和可能左侧。

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

如何让一个盒子的内容溢出背景

1 个答案: