Question

我需要剪切一个背景的 div 和标题如下方式:

虽然很容易在坚固的背景上(通过设置内嵌区块的元素,并使用与主的相同 bg 颜色)实现,但当背景为图像时,它并不真正有效:

能否对第二个例子产生同样的效果?

Answer 1

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

在 IE9 < a href=" http://dabblet.com/gist/2788690" rel="nofollow" >http://dabblet.com/gist/2788690 中也使用另一种解决办法。

另一个在 IE7 和 IE8 < a href="http://jsfiddle.net/thebabydino/Njtzb/"rel="nofollow"中工作 http://jsfiddle.net/thebabydino/Njtzb/

Answer 2

也许不是最好的解决办法, 但你可以做这样的事情:

假设 HTML 标记类似 :

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

如果 outer 的背景是图像,而 标题 的背景是虚线,您可以设置 blogin-image 的背景与 outer 一样,然后设置 backlack-position 背景位置以与元素相同的数量抵消该图像,因此它与其他背景排序。