1

I have some problem with CSS mask-image property. Here is link for working code: https://codepen.io/Nacho20/pen/MWQrPRy . Ok, but when I try to use images for masking from local computer it stops working. Here is code that does not work:

   <html lang="en">
    <head>
 <title>Hello!</title>
    <style>
      body {
        font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
        margin: 2em;
           }
      img {
        max-width: 100%;
        display: block;
          }
      .container {
        width: 400px;
        height: 300px;
        margin: 1em auto;
                 }
      .container img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        mask-size: cover;
        -webkit-mask-size: cover;
                 }
      .one {
        -webkit-mask-image: url('image-mask.png');  
        mask-image: url('image-mask.png');  
           }
    </style>
  </head>  
 <body>
   <div class="container">
     <img src="masking-example1.jpg" alt="Balloons">
   </div>
   <div class="container">
    <img class="one" src="masking-example1.jpg" alt="Balloons">
   </div>
 </body>
</html>

I have downloaded exactly the same images used in the codepen example and have saved them in the same folder as the html file that uses them. Some of the properties are probably unnecessary - object-fit: cover; , mask-size: cover; and -webkit-mask-size , but I have added them here because they were in the original article that i followed https://www.digitalocean.com/community/tutorials/css-masking-with-mask-image , section Masking Using Images .
Also, I have tried a lot of other examples from codepen that are using CSS masks and if I download the used files on my local computer and try to use them as local mask-image files, it stops working. I also created a couple of times images in Paint 3D with transparent canvas and some non transparent rectangles, triangles ,etc on the canvas and tried to used them as mask-image file, it doesn't work. I checked 3 or 4 similar questions here but I didn't find answer. In some of them there are advices to change settings of server - ok, but I don't use server at all, just local computer.

Roni
  • 11
  • 4
  • Do you get any errors in your browsers developer console? If so, please append them to your post. – Laisender May 27 '22 at 17:20
  • I just checked, it is written in console: Access to image at 'file:///C:/Users/home/Desktop/A/image-mask.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. image-mask.png:1 Failed to load resource: net::ERR_FAILED – Roni May 27 '22 at 17:25
  • Are you running any kind of Webserver like Xampp or Wamp? – Laisender May 27 '22 at 17:47
  • I think I found some kind of solution. Thanks to @Laisender for asking me to see what is written in the console. Create a Chrome browser's shortcut. Right-click on the icon and in properties, edit target to "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" and save. Then using Chrome open the page using ctrl+o. NOTE: Do NOT use this shortcut for regular browsing . It was an answer in this link: https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – Roni May 27 '22 at 17:50
  • @Laisende - I don't. I saw the message in the console and googled it and it pointed the above mentioned link. – Roni May 27 '22 at 17:53
  • Well as long as it works for you thats fine then – Laisender May 27 '22 at 17:56

0 Answers0