创意SVG蒙版
创意SVG蒙版
提问于 2020-05-25 16:09:04
我想创建一个蒙版的图片使用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>
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-25 16:38:59
你可以像下面这样使用多个背景来简化你的代码。注意，我已经使用了内联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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61998301
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号