如何使框的内容溢出通过背景

Question

我正在尝试用CSS3来完成一些类似的事情：

​

​

其中紫色的圆圈是图像，紫色较少的部分是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>

​

​