我想用svg文件在图片上创建一个遮罩。
它将用于标题部分，一个不透明度为50%的掩模的标题。
但我在响应式中遇到了问题。在高分辨率下，遮罩后面将是空的和纯色的，而在低分辨率下，图片将从遮罩中溢出。
请看看我的尝试，并帮助我。
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>谢谢
你可以简化你的代码，像下面的使用多个背景。请注意，我已经使用了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>