“选择性遮蔽”与SVG元素下方和身体背景

Question

我现在在一个页面上工作，其中有两个div类，一个大亲戚定位。而另一个绝对我放在网页上不同的X，Y位置。绝对div具有SVG背景，其中间具有不透明度。

虽然问题是当绝对div位于相对的顶部时，它也会通过不透明度显示下方的相对div，这是一个不需要的结果。

我的问题是，用CSS / SVG以某种方式“选择性屏蔽”。或者还有其他创造性的解决方法吗？我已经尝试了很多搜索，但我还没有找到任何有价值的信息。

例如，见图片：

Answer 1

这适用于clip-path。但是，不要相信这会在FF或IE中起作用。

我们的想法是使用clip-path剪切下div下的一部分，该部分对应于重叠区域的大小和位置。如果div移动，可能需要通过js更新，但如果相对位置是静态的，你只需创建一次css就可以了。

http://jsfiddle.net/tL3gxtjw/

body {
  background-color: yellow;
}
#under {
  position: relative;
  top: 25px;
  left: 25px;
  height: 200px;
  width: 200px;
  background-color: blue;
  border: 3px solid red;

  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 115px, 30px 115px, 30px 70px, 0 70px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 115px, 30px 115px, 30px 70px, 0 70px);
}
#over {
  height: 40px;
  width: 40px;
  border: 5px solid green;
  position: absolute;
  top: 100px;
  left: 15px;
  ;
}

<div id="under"></div>
<div id="over"></div>

Answer 2

如果您准备将所有内容都放在SVG中并且可以灵活地将颜色用作绿色屏幕，那么您可以使用过滤器来完成它，但它有点隐蔽：

codepen：http://codepen.io/mullany/pen/sogvi?editors=101

svg{
background-image: url("http://slowbuddy.com/wp-content/gallery/plain-background/cool-background-textures-ha_textures.jpg");
}

<svg>
  <defs>
  <filter id="knockoutSpecial">
    <!--pulls the offscreen text- "Cutting Out Text" into the filter region so we can use it -->
    <feOffset dy="150" dx="0" result="pos-text">
      <animate attributeName="dx" values="0;300;0" dur="6s" repeatCount="indefinite"/>
    </feOffset>
    <!--uses "out" to knock out the overlapping areas" -->
    <feComposite operator="out" in2="SourceGraphic" in="pos-text" result="cut-red"/>
     <!-- uses only the offset term to discard original text color and change to our desired color -->   
    <feColorMatrix in="cut-red" result="recolor1" type="matrix" values="0 0 0 0 1
                          0 0 0 0 0.0
                          0 0 0 0 0.1
                          0 0 0 1 0"/>    
   <!-- discards our green-screen fill, setting any green to a very low opacity using the -5" -->   
    <feColorMatrix in="SourceGraphic" result="empty-red" type="matrix" values="1 0 0 0 0
                          0 1 0 0 0
                          0 0 1 0 0
                          0 -5 0 1 0"/>
   <!-- uses only the offset term to discard original text stroke color and it to our desired color -->   
    <feColorMatrix in="empty-red" result="recolor2" type="matrix" values="0 0 0 0 0.5
                          0 0 0 0 0.5
                          0 0 0 0 0.5
                          0 0 0 1 0"/>
  <!-- superimposes our cut out text and our now empty text both at their correct color -->   
    <feComposite operator="over" in="recolor1" in2="recolor2"/>
  </filter>
  </defs>
  
  <g filter="url(#knockoutSpecial)">
      <!-- uses pure red, green and blue colors purely for pixel selection in the filter - the content is recolored in the filter. Also positions part of our text off screen. We'll bring that back with our first filter term. -->  
    <text x="0" y="-50" font-size="84" font-weight="bold" fill="red">Cutting out text?</text>
    <text stroke="blue" stroke-width="2" fill="green" x="40" y="120" font-size="84" font-weight="bold" font-family="helvetica">No Problem....</text>
    
  </g>
  
  
</svg>