带透孔的半透明覆盖/掩膜

问题描述：

我试图用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/

答

只是要一个内嵌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。

带透孔的半透明覆盖/掩膜

相关推荐