用元素“切割”背景的任何方法？

Question

我需要通过以下方式剪切div的背景：

虽然可以在实体背景上轻松实现（通过将元素设置为内联块并使用相同的bg颜色作为主要颜色），但当背景是图像时它并不真正起作用：

第二个例子可以达到同样的效果吗？

Answer 1

也许不是最好的解决方案，但你可以这样做：

假设HTML标记类似于：

<div id='outer'>
  <div id='heading'>
    <span id='date'>May 20th, 2012</span>
    ...
  </div>
</div>

如果outer的背景是图片，而heading的背景是虚线，则可以将background-image的{​​{1}}设置为与span相同，然后设置outer以使该图像偏移与元素相同的量，因此它与其他背景对齐。

Answer 2

CSS3解决方案将是http://dabblet.com/gist/2788465 - 它使用最少的标记和样式。

另一种解决方案也适用于IE9 http://dabblet.com/gist/2788690

另一个也适用于IE7和IE8 http://jsfiddle.net/thebabydino/Njtzb/