剪辑路径图像 - 图像上需要透明边框答案

【问题标题】：Clip-path image - need transparent border on image剪辑路径图像 - 图像上需要透明边框
【发布时间】：2018-11-19 21:00:01
【问题描述】：

我有一个六边形的图像，我想在其上应用 2px 实心 rgba(0, 0, 0, .141) 边框。边框需要在图像上而不是在图像之外。这是我的形状代码。

img{
    position: absolute;
    height: 75px;
    width: 67px;
    top: 25px;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

任何对最佳方式的支持都会很棒！

【问题讨论】：

你需要边框跟随形状？
@TemaniAfif - 我需要“边框”来显示图像。它大部分是透明的，所以你可以看穿它并看到它下面的图像。我觉得我需要在图像上添加两层——比如添加透明度的层，然后是每个方向大 4px 的层来切割六边形。我只是不知道该怎么做。
你需要额外的层，但你应该通过 SVG 而不是 CSS ;)
OsuDani，我对this 问题的回答可能会对您有所帮助。

标签： css image sass border

【解决方案1】：

如果你的浏览器支持，你可以看看 mix-blend-mode （使用伪来创建混合模式效果）：

div {
  position: relative;
  height: 75px;
  width: 67px;
  
}

div::before,
div::after,
div img {
  position:absolute;
  height:100%;
  width:100%;
    top:0;
  left:0;
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
div::before,
div::after {
  z-index:1;
  content:"";
  background:rgba(0,0,0, .141) ;
  
}
div::before {
  height:61px;
  width:54px;
  top:7px;
  left:7px;
  background:rgba(255,255,255,0.5);
  mix-blend-mode:overlay;
}

<div>
  <img src="https://images.freeimages.com/images/premium/thumbs/3249/3249390-freestyle-man.jpg">
</div>
  original image
  <img src="https://images.freeimages.com/images/premium/thumbs/3249/3249390-freestyle-man.jpg">

在我看来，这是一个 SVG 工作；）

【讨论】：

谢谢！这真的很接近我的需要，但我认为它会导致我不想更改的图像部分出现一些颜色差异。我肯定会考虑将 SVG 作为一种选择。如果您知道任何好的 svg 生成器，请告诉我 :)