时间戳

首页 > 解决方案 > css中的图像掩码不适用于本地文件

css - css中的图像掩码不适用于本地文件

问题描述

我正在尝试使用 CSS 和 WebKit 属性 (-webkit-mask-image) 屏蔽图像。但是由于某种原因，当我从 PC 上的本地文件中使用它时，甚至当我将它上传到我的网站并使用链接时，它都不起作用。如果我直接从教程网站使用蒙版图像，我遵循蒙版效果很好。在下面的代码中，您可以看到我已经注释掉了一个 webkit-mask-image，如果您按原样运行代码，您将什么也看不到，而如果您取消注释并注释掉第二个 webkit-mask-image，它将开始工作。如果我使用 PC 的文件路径而不是教程 URL，也会发生同样的事情。这个你能帮我吗。看起来真的很奇怪。


     <!DOCTYPE html>
    <html>
    <head>


    <style >
        html, body {
          height: 100%;
        }

        img.two {
          height: 50%;
          width: auto;
        }
        .mask4 {
          /*-webkit-mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");*/
          -webkit-mask-image: url("https://3dmetalart.com/wp-content/uploads/2020/05/image-mask.png");
          -webkit-mask-size: 400px 600px;


        }
    </style>
    </head>
    <body>
        <h1>Image mask using png </h1>
        <img class="two mask4"src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg"><br>

    </body>
    </html>

标签： csscss-mask

解决方案

推荐阅读