Creative SVG Mask

user_6134842 0
Viewed 77

i want to create a mask over a picture using svg file.

it will use for header section, a header with 50% opacity mask over it.

but i have problem in responsive. in high resolutions, behind mask will empty and solid color, and in low resolutions, picture will overflow from mask.

please look at my try and help me.

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>

thanks

mask svg css
1 Answers

You can simplify your code like below using multiple background. Note that I have used the SVG inline and added preserveAspectRatio="none" to it

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>

But since it's supposed to work as a mask you should use it as mask like below. Only the second path of the SVG is needed (the part we need to hide)

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>

user_86203330
Related