css - 有什么方法可以用元素“剪切”背景？

Question

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

虽然它可以在纯色背景上轻松实现（通过将元素设置为 inline-block 并使用与主背景相同的 bg 颜色），但当背景是图像时它实际上不起作用：

是否可以在第二个示例中达到相同的效果？

Answer 1

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

假设 HTML 标记类似于：

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

如果背景outer是图片，背景heading是虚线，可以设置sbackground-image的span和相同outer，然后设置background-position图片偏移量与元素相同，这样就对齐了与其他背景。

Answer 2

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

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

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