如何使用特定形状的另一个div显示div上方的页面背景

Question

我有一个背景设置为某个img的页面。 我在顶部有一个div（比如div_1）：50％是一个不透明度0.6的水平黑条。 在左边50％左右，我想显示一个div（带有一些内容），白色背景，它是一个圆形的角形框，不透明度为0.6，这个为div_2。

我希望div_2看起来像直接在页面背景上而没有来自div_1的效果。 可能有点令人困惑。 事情是因为div_2在div_1上而div_2具有透明背景，div_1正在影响div_2的外观。（因为我将白色透明框放在黑盒子上）。 为什么不删除div_1呢？我不能因为我想在页面中央放置黑条。

可能我需要其中一个

  

1）类似反剪辑的反转，这样我就可以切断div_1的确切部分，其中div_2将存在，这样div_2看起来就在页面背景上而没有来自div_1的干扰。

     

2）取一个额外的div（div_3）并显示div_2下面的页面背景的确切部分并将其放在div_1之上然后放入div_2，使其看起来好像是在页面背景上。

但我无法了解如何至少完成这两种解决方案中的一种。 任何其他解决方案也很乐意接受。

修改

  

这是我到目前为止的代码，

[Code](http://jsfiddle.net/5sDce/)

请检查div_2中无法看到的“必需”标记的外观，div_1的原因， 并且我不能让div_1浮动到div_2旁边，因为div_2是圆角。

  

自己尝试并求助，如果有人需要，请参阅下面的答案。

提前致谢。

Answer 1

我假设您正在搜索与this类似的内容。

计算机图形学中两种常用的操作是剪切和屏蔽。这两个操作都隐藏了元素的可视部分。如果您之前使用过SVG或HTML Canvas，这些操作对您来说可能并不新鲜。剪切定义可见元素的区域。这个区域周围的一切都没有被渲染 - 它被“剪裁”了。在屏蔽时，屏蔽图像与元素合成，影响该元素的alpha通道。蒙版元素的一部分完全或部分透明。新的CSS Masking规范旨在将这两个操作引入HTML世界。

在CSS 2.1中剪辑

CSS 2.1已经指定了剪辑属性。此属性仅限于矩形剪切，rect（）函数为顶部，右侧，底部和左侧边缘提供四个距离参数。烦人的部分：clip属性仅适用于绝对定位的元素。该属性在其他元素上被忽略。

CSS：

img {
  position: absolute;
  clip: rect(10px, 290px, 190px, 10px);
}

HTML：

<img src="image.jpg" width="568">

剪辑属性也仅限于SVG中的特定元素。这就是为什么SVG规范添加了现在由CSS Masking改编的剪辑路径属性的原因之一。

剪辑路径属性

clip-path属性可以应用于所有HTML元素，SVG图形元素和SVG容器元素。它引用一个元素或CSS排除引入的基本形状之一。

元素从SVG获取任何图形元素并将它们用作剪切区域。 SVG中的图形元素是,,,,和。允许组合多个图形元素。然后将所有形状的并集用作剪切区域。以下示例演示了使用：

CSS：

img {
  clip-path: url(#clipping);
}

HTML：

<svg>
  <defs>
    <clipPath id="clipping">
      <circle cx="284" cy="213" r="213" />
    </clipPath>
  </defs>
</svg>

<img src="image.jpg" width="568">

另一方面，基本形状不需要任何SVG标记。它们被添加到剪辑路径中，以便为简单的剪切操作提供简单的速记功能。

• rectangle（,,,,,）定义了一个 矩形，类似于clip的rect（）函数，并添加两个 圆形rects的可选半径参数。
• circle（,,）定义了一个带中心点的简单圆 和一个半径。
• ellipse（,,,）定义一个带中心的椭圆 点，水平和垂直半径。
• polygon（,, ...，）定义基于多边形 在通过的点列表上。

CSS标记可能类似于以下示例：

img {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}

剪辑对于可视内容的呈现非常有用。以下示例对图像应用不同的剪切操作。

希望这有帮助。

修改

更新后的Solution。 你有两个解决方案。一个是现有的场景，另一个是您想要的逆转。

您必须使用masking概念。

HTML：

<svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
      <stop stop-color="black" offset="0"/>
      <stop stop-color="white" offset="1"/>
    </linearGradient>

    <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.3" width="1" height=".7" fill="url(#)" />
      <circle cx=".5" cy=".5" r=".35" fill="white" />
    </mask>
  </defs>
</svg>

<img id="a" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">


        <svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
      <stop stop-color="black" offset="0"/>
      <stop stop-color="white" offset="1"/>
    </linearGradient>

    <mask id="masking1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
      <circle cx=".5" cy=".5" r=".35" fill="black" />
    </mask>
  </defs>
</svg>

<img id="b" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">

CSS：

img#a {
  mask: url(#masking);
}

img#b {
  mask: url(#masking1);
}

希望这有助于。

Answer 2

我想我明白你的意思但我不明白为什么div_1完全处于div_2之下而不只是浮在它旁边如果div_1它将被div_2隐藏。也许我发布你的内容会更容易。

Answer 3

这是我在用css中的大多数事情进行实验后所做的。

我将div_1作为div_2的父级，并为div_2提供了一个巨大的阴影，可以轻松地遍布整个页面，然后我将溢出隐藏到其父div_1并将其大小固定为我需要的条带的宽度和高度。 它所做的只是在有限的空间中显示了div_2的阴影，呈现出一个固定的矩形形状，在我需要的时候看起来像div_2后面的黑色条带，这次没有干扰div_2后面的任何黑条（请记住它只是一个影子!!）。所以我有我需要的东西，几乎适用于所有浏览器。 以下是代码，如果将来有人需要它：）

[Code](http://jsfiddle.net/uP8UU/)