CODEWITHSUNDEEP
htmlcsssvgpngclipping
Kreuzkoenig
Kreuzkoenig

Reputation: 39

Mask-image with png-file

I have a problem with mask-image: I want to use a png (or svg) as a clipping-mask on an image, so the image is shown in a certain shape. I found several examples online of how to do that, but refer now to this one: https://web.dev/css-masking/. When I use the png the author used in their example, it works. However, if I use my own png (or svg), it does not. I made sure the image is reduced to a white fill and a transparent part, just as the one in the example. I also just changed the URL, nothing else. However, the clipped image is not visible. I know that it is possible to use the SVG in HTML (which would work). However, I need it in CSS.

This is the code I use:

.header_image {
  width: 650px;
  height: 410px;
}

.header_image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.one {
  -webkit-mask-image: url(https://www.bildhost.com/images/2021/02/21/clipping-mask_4.png);
  /* My own - does not work */
  /* -webkit-mask-image: url(https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fstar-mask.png); /* From the example - works */
  mask-image: url(https://www.bildhost.com/images/2021/02/21/clipping-mask_4.png);
  mask-image: url(https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fstar-mask.png);
}
<div class="header_image">
  <img src="https://images.unsplash.com/photo-1567359781514-3b964e2b04d6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1431&q=80" class="one">
</div>

I tried to add the mask-image to head_images, too. Same effect: It works with the example-png but not with mine. So, I assume, there's something wrong with my png, but I can't say, what.

Has anyone an idea where I go wrong?

Upvotes: 1

Views: 8150

Answers (1)

Francesco
Francesco

Reputation: 589

Your image does not have any transparent background. I used photoshop to cut your picture with a transparent background then upload on the server.

Note the trick behind case 3 is to make your masks in black and white.

white will be the visible part, the actual shape you want to be visible black is uqual to transparent so it will not be visible.

Not sure what part you needed so I did 3 versions of the clip masks:

.header_image {
  width: 650px;
  height: 410px;
}

.header_image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.one {
 -webkit-mask-image: url(https://i.postimg.cc/QdYThVvx/clipmask1.png);
  mask-image: url(https://i.postimg.cc/QdYThVvx/clipmask1.png);

}
.two {
 -webkit-mask-image: url(https://i.postimg.cc/bvG2Jpj0/clipmask2.png);
  mask-image: url(https://i.postimg.cc/bvG2Jpj0/clipmask2.png);
}
.three {
 -webkit-mask-image: url(https://i.postimg.cc/kMb8dxQj/clipmask3.png);
  mask-image: url(https://i.postimg.cc/kMb8dxQj/clipmask3.png);
}
<div class="header_image">
  <img src="https://images.unsplash.com/photo-1567359781514-3b964e2b04d6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1431&q=80" class="one">
    <img src="https://images.unsplash.com/photo-1567359781514-3b964e2b04d6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1431&q=80" class="two">
      <img src="https://images.unsplash.com/photo-1567359781514-3b964e2b04d6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1431&q=80" class="three">
</div>

Upvotes: 0

Related Questions