Html 带孔的半透明覆盖层/遮罩
怎么做这样的东西 我尝试将3个div与Html 带孔的半透明覆盖层/遮罩,html,css,svg,Html,Css,Svg,怎么做这样的东西 我尝试将3个div与position:absolute一起使用（其中2个与transformation:skew（…）一起使用）。它可以工作，但并不完美。例如，在IE中，上下两个div之间有一些空间（我不能把一个放在另一个上，因为颜色会变暗），左右两侧也会倾斜（尽管可能可以通过在此处添加两个白色div来修复） html{ 显示：表格； 保证金：自动； } 身体{ 显示：表格单元格； } .集装箱{ 填充：15px； 边缘底部：30px； 位置：相对位置； } .面具{ 背
position:absolutetransformation:skew（…）
html{
显示：表格；
保证金：自动；
}
身体{
显示：表格单元格；
}
.集装箱{
填充：15px；
边缘底部：30px；
位置：相对位置；
}
.面具{
背景：rgba（0,0,0,0.78）；
位置：绝对位置；
z指数：99；
}
.面罩{
排名：0；
左：0；
宽度：100%；
身高：70%；
}
.左面具{
宽度：43%；
身高：30%；
左：0；
底部：0；
左边距：-24px；
变换：倾斜（-16度）；
}
.戴上面具，对吗{
宽度：43%；
身高：30%；
右：0；
底部：0；
右边距：-24px；
变换：倾斜（16度）；
}
html{
显示：表格；
保证金：自动；
}
身体{
显示：表格单元格；
}
.集装箱{
填充：15px；
边缘底部：30px；
位置：相对位置；
}
.面具{
位置：绝对位置；
z指数：99；
排名：0；
左：0；
}
只需制作一个内嵌SVG并将其覆盖在图像上，例如，查看： 最后，您可以使用这个简单的符号构建任何路径。然后可以在SVG上使用不透明度使背景图片可见 另外，为了改进您的代码并避免污染HTML，您可以将此SVG作为CSS中的数据uri，例如，它也使用SVG来解决CSS问题，以了解如何做到这一点。请记住，如果您也希望此CSS方法在IE9中工作，则需要将其编码为URL。不管怎么说，这只是一块糖，它与内嵌的HTMLSVG一样可以毫无问题地工作
<!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>
<!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>
<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>
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