Jump to content
Please Use CODE Tags

CSS Image Masking (CSS Level-intermediate) - Neither bottom or inside layer shows up

c0d0ps
By c0d0ps
in Programming
 Share
Go to solution Solved by C2dan88,

It does work.

It currently being blocked as chrome is blocking the image mask. You currently cannot load local files due to cors policy to  prevent malicious sites/extensions from accessing your local files. If you look in your browser development console (F12 -> Console tab) you'll see the error message.

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

 

 

 

 

Posted

Hi I'm using a .html file

Languages: HTML, CSS
Level: Beginner

 

Problem:

Unable to mask img_5terre.jpg as a layer inside w3logo.png

HTML

Spoiler 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The mask-image Property</title>

</head>
<body>
    
    <h1>The mask-image Property</h1>
    <h3>An image with a mask layer image:</h3>
    <div class="mask1">
    <img src="../../Images/img_5terre.jpg" alt="Cinque Terre">
    </div>
    
    <h3>Original image:</h3>
    <img src="../../Images/img_5terre.jpg" alt="Cinque Terre">
</body>
</html>

CSS

Spoiler 
        body{background-color: lightblue;}
        .mask1{
            -webkit-mask-image: url("../../Images/w3logo.png");
            mask-image: url("../../Images/w3logo.png");
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
        }
        img{
            width: 600;
            height: 400;}

 

 

 

Wrong

Spoiler

image.thumb.png.717913de8783f50e98f2f4f36ea73fab.png

Correct - example

Spoiler

image.thumb.png.cf8e61b066ac75c8a70a0c72d69128fd.png

 

PC  Specs 2022:

Spoiler
  • CPU
    AMD Ryzen R9 5900x @ 5.1GHz - Auto OC
  • Curve Optimizer Magnitude: -20
  • Motherboard
    ASUS ROG STRIX x570-F Gaming
  • RAM
                                        Kingston Fury 32GB DDR4 3200MHz 16x2GB
  • GPU
    MSI 3070 8GB Ventus 2x OC
  • Case
    LIAN LI LANCOOL MESH II Mesh RGB Black
  • Storage
    Kingston NV1 2TB M.2. NVMe
  • PSU
    Seasonic Focus GX 850w 
  • Display(s)
    MSI OPTIX MAG 251RX IPS 240hz & ASUS MG248Q Vertical 144hz & Dell 60hz
  • Cooling
    NZXT Kraken x73 360mm
  • Keyboard
    Tt eSports Meka G1
  • Mouse
    Logitech G Pro Wireless
  • Operating System
    -Windows 10 Professional 64bit
Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

It does work.

It currently being blocked as chrome is blocking the image mask. You currently cannot load local files due to cors policy to  prevent malicious sites/extensions from accessing your local files. If you look in your browser development console (F12 -> Console tab) you'll see the error message.

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

 

 

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
18 hours ago, C2dan88 said:

It does work.

It currently being blocked as chrome is blocking the image mask. You currently cannot load local files due to cors policy to  prevent malicious sites/extensions from accessing your local files. If you look in your browser development console (F12 -> Console tab) you'll see the error message.

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

How do I enable image masking in chrome?

PC  Specs 2022:

Spoiler
  • CPU
    AMD Ryzen R9 5900x @ 5.1GHz - Auto OC
  • Curve Optimizer Magnitude: -20
  • Motherboard
    ASUS ROG STRIX x570-F Gaming
  • RAM
                                        Kingston Fury 32GB DDR4 3200MHz 16x2GB
  • GPU
    MSI 3070 8GB Ventus 2x OC
  • Case
    LIAN LI LANCOOL MESH II Mesh RGB Black
  • Storage
    Kingston NV1 2TB M.2. NVMe
  • PSU
    Seasonic Focus GX 850w 
  • Display(s)
    MSI OPTIX MAG 251RX IPS 240hz & ASUS MG248Q Vertical 144hz & Dell 60hz
  • Cooling
    NZXT Kraken x73 360mm
  • Keyboard
    Tt eSports Meka G1
  • Mouse
    Logitech G Pro Wireless
  • Operating System
    -Windows 10 Professional 64bit
Link to comment
Share on other sites
Link to post
Share on other sites
Posted
On 5/3/2022 at 9:21 AM, c0d0ps said:

How do I enable image masking in chrome?

The masking is not disabled, the issue is a CORS error with your file serving.

 

I recommend installing a local webserver like XAMPP. It will run a local apache server on your machine which will behave just like a website which you can access via localhost in your browser. Install it, launch the control panel, start Apache and then place your website files in path_to_xampp_install/xampp/htdocs/

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×