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

但是，它会影响彩色边框，也会变成灰色。有没有＆＃34;无痛＆＃34;解决方法在这里？

Answer 1

由于img不接受:after / :before，并且filter似乎适用于子元素，因此我能想到的唯一解决方案是基本的：< / p>

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>

与彩色边框的灰度图像

1 个答案: