小编Sea*_*bon的帖子

我第一次使用 svg<image>标签。我使用这个标签是为了在图片上应用灰色过滤器（谢谢 IE）。

这是我的 HTML ：

<div class="container">
  <div class="item">
    <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        <image  xlink:href="https://dummyimage.com/400x400/000/00ffd5.png" />
    </svg>
  </div>
</div> 

和 scss ：

.item {
  position: relative;
  width: 20%;
  height: 220px;

  background-color: blue;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  image {
    width: 100%;
    height: 100%;
  }
}

我想使图像适合父级的容器。类似背景的东西：用 css 覆盖。有人有想法吗？

您可以在以下位置查看：https : //codepen.io/seabon/pen/QvBBrd

蓝色背景是为了 div.item