如何添加复合css -webkit-mask-image？ [英] How to add composite css -webkit-mask-image?

问题描述

我的要求是在div的顶部添加一个遮罩，所有的区域都有50％的透明度，除了div中的一个小窗口应该是100％不透明的。

- 100％不透明我的意思是，内容应该是完全可见的，没有任何面具在该地区。

我也附上一个图像提到我尝试实现。

我试过下面提到的面具，但没有成功：

  -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.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 
）
;
  

首先，你需要创建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> 
  

要将面具放在div中，请调整< svg> ; 标签（如果您需要覆盖整个页面或绝对，则固定嵌套在div中）：

 < 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 =黑色/> 
 ... 
  

调整x，y，宽度和高度以满足您的需要。 唯一的好处是，如果您有可选择的内容，您将无法通过点击/用鼠标进行选择，如果这不是一个问题，它是一个坚实的方法

以下是一个工作示例（在chrome，firefox，opera，IE9 +中使用）： http://codepen.io/easwee/pen/gyExz

My requirement is to add a mask on top of a div with all the region to have 50% transparency, except a small window in that div which should be 100% opaque.

-by 100% opaque i meant, the content should be fully visible without any mask on that area.

I am also attaching an image mentioning what i am trying to achieve.

I have tried below mentioned mask, but it didn't work out:

 -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 
            )
            ;"

解决方案

You could achieve that by masking with a SVG.

First you need to create the SVG element and add it to 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>

To position your mask inside your div adjust the styling on the <svg> tag (either fixed if you need to cover whole page or absolute if you are nesting in a div):

<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;'>
...

This part is your transparent area:

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

Adjust x, y, width and height to fit your needs. The only catch is that if you have selectable content under it, you won't be able to select it by clicking/draging with mouse - if this is not a problem for you it is a rock solid approach.

Here is a working sample (works in chrome, firefox, opera, IE9+ ): http://codepen.io/easwee/pen/gyExz

这篇关于如何添加复合css -webkit-mask-image？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！