带有 png 文件的掩码图像

Posted 2023-03-23

【中文标题】带有 png 文件的掩码图像

【英文标题】：Mask-image with png-file

【发布时间】：2021-05-23 23:12:24

【问题描述】：

我对 mask-image 有疑问：我想在图像上使用 png（或 svg）作为剪贴蒙版，因此图像以特定形状显示。我在网上找到了几个如何做到这一点的例子，但现在参考这个：https://web.dev/css-masking/。 当我使用作者在他们的示例中使用的 png 时，它可以工作。但是，如果我使用自己的 png（或 svg），则不会。 我确保图像被缩小为白色填充和透明部分，就像示例中的一样。我也只是更改了网址，没有别的。但是，剪裁的图像不可见。 我知道可以在 html 中使用 SVG（这可行）。但是，我在 CSS 中需要它。

这是我使用的代码：

.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>

我也尝试将遮罩图像添加到 head_images。相同的效果：它适用于 example-png，但不适用于我的。所以，我认为我的 png 有问题，但我不能说是什么。

有人知道我哪里出错了吗？

【问题讨论】：

打开控制台，看看你是否收到关于 CORS 安全问题的红色错误

您用作蒙版的图像是部分白色部分透明。请尝试使用黑白图像

@TemaniAfif 这就是问题所在，我可以在使用 imgur 后使用 png。多么奇怪，我以前从来没有遇到过这个主机的问题。非常感谢，我不会那样做的！

@enxaneta 感谢您的建议。我尝试使用黑白图像（更改上传器后），但是它不起作用。我认为这是因为您需要一个实际“剪辑”图像的透明部分。

事实上你需要一个黑色 剪辑图像的部分。请看一下这个demo：codepen.io/chriscoyier/pen/dPYJKJ另请阅读文章：css-tricks.com/clipping-masking-css请看一下用作蒙版的图片

【参考方案1】：

您的图片没有任何透明背景。 我用photoshop把你的图片剪成透明背景，然后上传到服务器上。

注意案例 3 背后的技巧是让你的面具变成黑白的。

白色将是可见部分，即您希望可见的实际形状 黑色不等于透明，所以不可见。

不确定您需要什么部分，所以我做了 3 个版本的剪辑蒙版：

.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>

【讨论】：

感谢您的回答！但是，通过上传我的原始 png（确实具有透明背景），我可以解决这个问题。我不必将背景或任何其他部分更改为透明或黑色（正如@enxaneta 也提到的那样）。正如 Temani Afif 所写，问题在于 CORS 安全错误。