帶透孔的半透明覆蓋/掩膜

如何製作類似的東西？帶透孔的半透明覆蓋/掩膜

我試圖用3周的div position: absolute（和它們的2 transformation: skew(...)）。它有效但不完美。例如在IE中，頂部和底部div之間存在一定的空間（我不能將一個放在另一個之上，因爲顏色會變得更暗），左側和右側也會傾斜（儘管它可能通過添加兩個白色這裏的div）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <style type="text/css"> 
     html { 
      display: table; 
      margin: auto; 
     } 
     body{ 
      display: table-cell; 
     } 

     .container { 
      padding: 15px; 
      margin-bottom: 30px; 
      position: relative; 
     } 

     .mask { 
      background: rgba(0, 0, 0, 0.78); 
      position: absolute; 
      z-index: 99; 
     } 

     .mask-top { 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 70%; 
     } 

     .mask-left { 
      width: 43%; 
      height: 30%; 
      left: 0; 
      bottom: 0; 
      margin-left: -24px; 
      transform: skew(-16deg); 
     } 

     .mask-right { 
      width: 43%; 
      height: 30%; 
      right: 0; 
      bottom: 0; 
      margin-right: -24px; 
      transform: skew(16deg); 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <img src="http://i.imgur.com/cnvTRdz.png"/> 

     <div class="mask mask-top"></div> 
     <div class="mask mask-left"></div> 
     <div class="mask mask-right"></div> 
    </div> 
</body> 
</html>

http://jsfiddle.net/sw4tr5bc/2/

有沒有什麼更好的辦法？除了在IE中不支持的CSS遮罩。

UPD：

這裏是工作液（用SVG，如答案建議）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <style type="text/css"> 
     html { 
      display: table; 
      margin: auto; 
     } 
     body{ 
      display: table-cell; 
     } 

     .container { 
      padding: 15px; 
      margin-bottom: 30px; 
      position: relative; 
     } 

     .mask { 
      position: absolute; 
      z-index: 99; 
      top: 0; 
      left: 0; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <img src="http://i.imgur.com/JlWbC0z.png"/> 

     <svg class="mask" width="100%" height="100%" viewbox="0 0 798 798"> 
      <path d="M0 0 L0 798 L270 798 L340 570 L455 570 L520 798 L798 798 L798 0 L0 0 Z" fill="black" opacity="0.78"></path> 
     </svg> 
    </div> 
</body> 
</html>

http://jsfiddle.net/sw4tr5bc/3/

來源

2015-11-07 AlexP11223

只是要一個內嵌SVG，並把它在你的形象，例如看看this SVG：

<svg width="200" height="200"> 
    <path d="M0 0 L200 0 L200 200 L150 200 L150 150 L100 150 L100 200 L0 200 L0 0 Z" fill="black" /> 
</svg>

這應該從IE9開始（當然它在所有的現代瀏覽器上運行）。

這並不直接看起來像你想達到的結果，但這只是一個方向。事實上，要成功地將它應用到您的案例中，您只需在上面的SVG中更改一些數字即可。

的過程中的一些解釋：

M0 0 - put the start of your path to x=0 y=0 
L200 0 - line to x=200 y=0; then with some more lines you just draw your figure until you return by L0 0 to the beginning 
fill="black" sets the color of the figure

所以最後你可以建立使用這個簡單的符號任何路徑。然後，您可以在SVG上使用不透明度以使背景圖片可見。

此外，爲了改善您的代碼並避免污染HTML，您可以將此SVG作爲data-uri放入您的CSS中。 see my another answer它也使用SVG解決CSS問題，以瞭解如何做到這一點。請記住，如果您還想在IE9中使用此CSS方法，則需要將其編碼爲URL。無論如何，這只是一塊糖，它也可以毫無問題地用作內聯HTML SVG。

來源

2015-11-07 15:47:06 smnbbrv

帶透孔的半透明覆蓋/掩膜

回答

相關問題