CSS：使用 Mask 作为 Webkit-Mask-Image 的后备

Posted 2023-02-22

【中文标题】CSS：使用 Mask 作为 Webkit-Mask-Image 的后备

【英文标题】：CSS: Using Mask as a fallback for Webkit-Mask-Image

【发布时间】：2013-10-05 19:37:15

【问题描述】：

所以我一直在尝试将背景图像剪辑成一个圆形六边形形状，我发现 webkit 的惊人蒙版图像可以非常轻松地解决我的所有问题。遗憾的是，它只适用于 Chrome 和 Safari（当然）。

如何为非 webkit 浏览器构建 SVG 掩码的后备？是否可以使用我的图像文件夹中的 .svg 文件作为掩码，还是必须在 html 文档的 svg 标记中定义？

这是我要实现的 JSFiddle： http://jsfiddle.net/fbB3P/

CSS：

.hexagon 
    position: relative;
    display: inline-block;
    width: 205px;
    height: 233px;
    overflow: hidden;
    color: #fff;
    -webkit-mask-image: url('http://i40.tinypic.com/kajqg.jpg');
    text-align: center;


.hexagon .content 
    height: 186px;
    width: 186px;
    margin: auto;
    margin-top: 16px;


.hexagon a 
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;

HTML：

<div class="hexagon" style="background: url('https://s3.amazonaws.com/images.dailydabbles.com/artwork/skull-link5243b4c783a87-crop-260x260-medium.png');">
   <a href="#skullkid">
      <div class="content"></div>
   </a>
</div>

【参考方案1】：

太糟糕的屏蔽有awful support。

我利用:before 和:after 伪元素创建了另一种屏蔽方法。

jsFiddle demo here - 更好的跨浏览器支持。

HTML

<div class="hex"></div>

CSS

.hex 
    width: 205px;
    height: 233px;
    position: relative;
    background: url('https://s3.amazonaws.com/images.dailydabbles.com/artwork/skull-link5243b4c783a87-crop-260x260-medium.png');


.hex:before 
    content: "";
    width: 0;
    height: 0;
    border-bottom: 60px solid transparent;
    border-left: 103px solid white;
    border-right: 102px solid white;
    position: absolute;


.hex:after 
    content: "";
    width: 0;
    position: absolute;
    bottom: 0px;
    border-top: 60px solid transparent;
    border-left: 103px solid white;
    border-right: 102px solid white;

【讨论】：

这很棒，我已经探索了我的 CSS 选项。但我的问题是圆角似乎很难实现，Chrome 在对角边留下锯齿状边缘。

@div 是的 - 我知道，你是对的。这就是我能想到的。

@destan 很高兴它有帮助！