Question

我有一个六边形的图像，我希望将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%);
  }

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

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: