如何使一个框的内容溢出过去的背景

enter image description here

里的紫圆的形象和少紫色的事情是div背景。

我的第一个猜测是负填充，但快速搜索告诉我这是不允许的。正常溢出不起作用，因为我想让它在背景之上开始以及在其下面结束。我对CSS很新，所以我不知道这可能会怎么做。

2011-11-20 augzodia

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

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

来源

2011-11-20 12:57:11

真棒，这正是我想要的。非常感谢！ – augzodia

如何使一个框的内容溢出过去的背景

回答

相关问题