Question

我现在正在使用的代码是这样的： （请注意，这格式为css less。） 它似乎不适用于IE9或更旧版本，在查看之后我无法找到适合它的格式。

.mixin-clip-path-circle(@1,@2,@3) {
  -webkit-clip-path: circle(@1, @2, @3); 
  -moz-clip-path: circle(@1, @2, @3);
  clip-path: circle(@1, @2, @3);
}

.user-portrait {
  position: relative;
  display:inline-block;
  .clipped-portrait {
    .mixin-clip-path-circle(3.4rem, 3.4rem, 3.4rem);
    min-height: 6.8rem;
    position: absolute;
    display:block;
  }

<div class="user-portrait">
     <img src="img/styleguide/portrait-picture-example.png" class="clipped-portrait" />
</div>

编辑：要清楚，我正在寻找一种方法在IE9中使这项工作，它不必与clip-path属性。

Answer 1

MDN（https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath）似乎表明只有IE9 +支持clip-path。

如何在可以与IE9一起使用的图像上制作圆形剪贴蒙版？

1 个答案: