0

I've been trying to mask an image for a website I'm developing. Asyou'll see from the snippets I'm trying to use the mask as a logo for the home page. I'm still learning and I found this feature really interesting but when I execute the following code it simply displays a transparent image with the dimensions of the image src. I wrote this in CSS:

.agesciIcon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
    max-width: 100%;
    max-height: 100%;
    mask-image: url(tiger.png);
    -webkit-mask-image: url(tiger.png);
    mask-size: cover;
    -webkit-mask-size: cover;

}

same result as

-webkit-mask: url(tiger.png);
mask: url(tiger.png);

and this in HTML:

<body>

        <section>
            <header>
                <img class="agesciIcon" src="mountMaskImg.jpg" alt="agesci icon">
                <h1>Montecelio 1</h1>
                <h3>Un'associazione di cent' anni</h3>
            </header>

obviuosly there's the closing body tag in my code but it would've been too long to include all the code

my tiger.png is actually a black and white png. I've seen all the possible tutorials but they all do the same as I coded. I tried to change the background image to a .avif (as I saw in a Kevin Powell's tutorial) but it didn't change at all

here are my 2 imgs if it helps tiger background

LolloFP
  • 1
  • 3

1 Answers1

0

CSS uses alpha channel to process masks by default. Use the special property mask-mode: luminance; to use the color data of your image to mask.
Be aware tho that it does not have a great overall support accross browsers.

Anthony Bertrand
  • 96
  • 8