创意 SVG 蒙版

Question

我想使用 svg 文件在图片上创建蒙版。

它将用于页眉部分，上面有 50% 不透明蒙版的页眉。

但我的响应有问题。在高分辨率下，mask 后面会出现空白和纯色，在低分辨率下，图片会从 mask 溢出。

请看看我的尝试并帮助我。

body{
  background:#eee;
  padding:0;
  margin:0;
}
#header{
  position:relative;
  background:url(https://images.unsplash.com/photo-1531826267553-c4979aefab12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80);
  background-attachment: scroll;
  background-repeat: none;
  background-size:100% auto;
  background-position: 0 50%;
  padding-top:10px;
  padding-bottom:200px;
}
#header:before {
  background: rgba(36, 55, 84, 0.5);
  content: "";
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
  right: 0;
  top: 0;
}
#header:after {
  background:  url(https://svgshare.com/i/LSs.svg);
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  background-attachment: scroll;
  background-size: 100%;
  background-repeat: no-repeat;
  right: 0;
  top:calc(100% - 100px);
}
#header .header-content{
  z-index: 1;
  margin-top: 130px;
  position: relative;
  margin-bottom: -50px;
}
#header .header-content h1 {
  color: #fff;
  text-align:center;
}

<html>
  <head></head>
  <body>
    <div id="header">
      <div class="header-content">
        <h1>Welcome to our website</h1>
      </div>
    </div>
  </body>
</html>

谢谢

Answer 1

您可以使用多个背景简化您的代码，如下所示。请注意，我使用了内联 SVG 并向其添加了 preserveAspectRatio="none"

body {
  background: #eee;
  padding: 0;
  margin: 0;
}

#header {
  background: 
    linear-gradient(rgba(36, 55, 84, 0.5),rgba(36, 55, 84, 0.5)) top/100% calc(100% - 100px),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 450 35" preserveAspectRatio="none" ><path opacity="0.5" fill="%23243754"  d="M0,35h1.333l417-15c0,0,31.666-1.001,31.666-20H0V35z"/><path fill="%23EEEEEE" d="M0,35h1.333l417-15c0,0,31.666-1.001,31.666-20L450,35H0z"/></svg>') bottom/100% 100px,
    url(https://images.unsplash.com/photo-1531826267553-c4979aefab12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80) center/cover;
  background-repeat: no-repeat;
  padding-top: 10px;
  padding-bottom: 200px;
}

#header .header-content {
  margin-top: 130px;
}

#header .header-content h1 {
  color: #fff;
  text-align: center;
}

<div id="header">
  <div class="header-content">
    <h1>Welcome to our website</h1>
  </div>
</div>

但由于它应该用作遮罩，您应该像下面那样将它用作遮罩。只需要SVG的第二个路径（我们需要隐藏的部分）

body {
  background: linear-gradient(to right,red,blue);
  padding: 0;
  margin: 0;
}

#header {
  background: 
    linear-gradient(rgba(36, 55, 84, 0.5),rgba(36, 55, 84, 0.5)),
    url(https://images.unsplash.com/photo-1531826267553-c4979aefab12?ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80) center/cover no-repeat;
  padding-top: 10px;
  padding-bottom: 200px;
  -webkit-mask:
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 450 35" preserveAspectRatio="none" ><path fill="black" d="M0,35h1.333l417-15c0,0,31.666-1.001,31.666-20L450,35H0z"/></svg>') bottom/100% 100px no-repeat,
     linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
  mask:
     url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  viewBox="0 0 450 35" preserveAspectRatio="none" ><path fill="black" d="M0,35h1.333l417-15c0,0,31.666-1.001,31.666-20L450,35H0z"/></svg>') bottom/100% 100px no-repeat,
     linear-gradient(#fff,#fff);
  mask-composite:exclude;
}

#header .header-content {
  margin-top: 130px;
}

#header .header-content h1 {
  color: #fff;
  text-align: center;
}

<div id="header">
  <div class="header-content">
    <h1>Welcome to our website</h1>
  </div>
</div>

创意 SVG 蒙版

Creative SVG Mask

css

svg

mask