如何添加複合css -webkit-mask-image？

我的要求是在div的頂部添加一個遮罩，使所有區域都具有50％的透明度，除了該div中的小窗口應該是100％不透明的。如何添加複合css -webkit-mask-image？

-by 100％opaque我的意思是，內容應該完全可見，沒有任何面具在該地區。

我也附上一張圖片，提及我想要達到的目標。

我已經試過提到面具之下，但它沒有工作：

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

Image sowing the requirements

來源

2014-09-01 Ninja

你可以做到這一點通過用SVG屏蔽。

首先，你需要創建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>標籤（無論是fixed，如果你需要覆蓋整個頁面或absolute如果你在一個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='black' /> 
...

調整x，y，寬度和高度以滿足您的需求。 唯一的問題是，如果您有可選的內容，您將無法通過點擊/拖動鼠標來選擇它 - 如果這對您來說不是問題，那麼它是一種堅如磐石的方法。

這裏是工作示例（在Chrome的工作，Firefox，歌劇，IE9 +）：http://codepen.io/easwee/pen/gyExz

來源

2014-09-01 21:36:10 easwee

非常感謝，這是戰爭所需要的，它的工作方式就像WOW一樣....只是一個問題，如果你想我可以把它作爲一個單獨的問題提出「是否可以在增加透明區域的寬度，就像在這種情況下從寬度= 200到寬度= 250「....沒有動畫，我可以通過使用setAttribute達到它，但是有辦法爲此添加動畫。如果你覺得這是單獨討論所有在一起，我可以在另一個線程中提出它作爲單獨的問題.... – Ninja 2014-09-03 08:43:36

@Ninja你可以使用javascript動畫透明區域 - svg語法可以作爲普通的HTML操作。 – easwee 2014-09-03 10:12:55

幸運地選擇指針事件屬性沒有問題。 http://codepen.io/NeXTs/pen/rxjZzd – Denis 2016-01-04 09:58:12

如果你指的是規格：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

... -webkit-mask-composite有多個參數（需要時）。在大多數情況下，我會假設組合的數量與掩碼的數量相匹配。

幾件事情要記住：

添加的第一個掩碼是出現在你的CSS串最後，一樣的合成串的次序。
按順序思考（每個複合迭代的新渲染），其中「源」是迭代中當前呈現的掩碼，目標是下一次迭代。

可以用CSS純粹的實現爲顯示在此codepen：http://codepen.io/daleyjem/pen/MYqvqY

首先，我用前2個防毒面具（最後2中的CSS字符串）建立了容器內的完全不透明廣場和然後我用一個source-over添加了一個覆蓋整個區域的50％不透明盒子。

您可以使用不同的組合來實現相同的效果。

來源

2015-03-08 06:20:53 daleyjem

如何添加複合css -webkit-mask-image？

回答

相關問題