只有div的背景被img隐藏了?

时间:2013-12-28 22:04:36

标签: html css

包含图片的div使用border-radiusoverflow:hidden包含圆角。

div还包含另一个带有橙色背景和一些白色文本的div。

当使用负边距将第二个div放在图像上时,结果是橙色背景隐藏在图像后面,但白色文本显示在图像的顶部。这是为什么?

小提琴:http://jsfiddle.net/nq9Jv/

进一步的问题:如何使橙色div完全显示在图像的“上方”,请记住我不能使用position: relative,因为这会将其从流中取出,因此不允许边界半径隐藏第二部分的第一个div。

1 个答案:

答案 0 :(得分:2)

使用负边距时,我不确定橙色背景是否出现在图像上方。

我稍微调整了您的示例,并在父元素上使用position: relative并在子元素上使用position: absolute,使橙色div显示在图像上方,同时保持border-radius隐瞒儿童元素。

http://jsfiddle.net/nq9Jv/4/

这就是你想要的吗?