css - 带彩色边框的灰度图像

Question

我需要在页面上放置一组带有彩色边框的黑白图像。我不想在 Photoshop 中编辑图像，因为以后可能会有一些动态添加的图像；因此，我使用了相应的 filter:grayscale(100%)。

img.myImage {
   display: block;
   position: relative;
   border: 6px solid #0090ff;
   width: 85%;
   margin: 0 auto;

   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}

但是，它会影响彩色边框，它也会变成灰色。这里有“无痛”的解决方法吗？

Answer 1

由于 img 不接受 :after/:before，而且 filter 似乎适用于 child 元素，我能想到的唯一解决方案是基本的:

div {
  display: inline-block;
  background-color: #0090ff;
  padding: 6px;
  width: 200px;
}

img {
   display: block;
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   width: 100%;
}

<div>
  <img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" />
</div>