html - 如何添加复合CSS -webkit-mask-image？

Question

我的要求是在 div 顶部添加一个 mask ，使所有区域都具有 50% 透明度，但该 div 中的一个小窗口应该是 100% 不透明。

-我所说的 100% 不透明是指，内容应该完全可见，该区域上没有任何 mask 。

我还附上了一张图片，其中提到了我想要实现的目标。

我尝试过下面提到的面膜，但没有成功:

-webkit-mask-composite: source-over;
-webkit-mask-image:
    -webkit-linear-gradient(

        left,
        rgba(0,0,0,1) 0 ,
        rgba(0,0,0,1) 100px ,
        rgba(0,0,0,0.5) 100px , 
        rgba(0,0,0,0.5) 300px 

    ),
    -webkit-linear-gradient(

        top,
        rgba(0,0,0,0.5) 0 ,
        rgba(0,0,0,0.5) 50px,
        rgba(0,0,0,1) 50px,
        rgba(0,0,0,1) 100px,
        rgba(0,0,0,0.5) 100px,
        rgba(0,0,0,0.5) 150px 
    )
;"

Answer 1

您可以通过使用 SVG 进行 mask 来实现这一点。

首先您需要创建 SVG 元素并将其添加到 DOM:

 <svg id='svgOverlay' width='100%' height='100%' version='1.1' xmlns='http://www.w3.org/2000/svg' style='position:fixed;top:0;left:0;z-index:100000;'>
    <defs>
      <mask id='mask'>
        <rect x='0' y='0' width='100%' height='100%' fill='white' />
        <rect x='0' y='40' width='200' height='200' fill='black' />
      </mask>
    </defs>
    <g>
      <rect fill='black' width='100%' height='100%' opacity='0.5' mask='url(#mask)' />                
    </g>
  </svg>

要将 mask 放置在 div 内，请调整 <svg> 上的样式。标签(如果您需要覆盖整个页面，则为 fixed；如果您嵌套在 div 中，则为 absolute):

<svg id='svgOverlay' width='100%' height='100%' version='1.1' xmlns='http://www.w3.org/2000/svg' style='position:fixed;top:0;left:0;z-index:100000;'>
...

这部分是你的透明区域:

...
<rect x='0' y='40' width='200' height='200' fill='black' />
...

调整 x、y、宽度和高度以满足您的需要。 唯一的问题是，如果您在其下面有可选择的内容，您将无法通过用鼠标单击/拖动来选择它 - 如果这对您来说不是问题，那么这是一种可靠的方法.

这是一个工作示例(适用于 chrome、firefox、opera、IE9+):http://codepen.io/easwee/pen/gyExz