Question

我的div里面有一个带有两个像素边框的图片标签。将滤镜应用于此图像以使其为灰度或“黑白”时，我将图像视为黑白，但不会保留边框颜色，并且还会采用此特性。我也可以在这些边框上设置外部div，但div的宽度设置为100％，这使得外框具有边框而不是图像本身。

<div class="article-inline"><img src="images/bg/beach-girl.jpg" /></div>

.article-inline
{
    width: 100%;
}
.article-inline img
{
    height: 400px;
    max-width:100%;
    max-height:400px;
    overflow:auto;
    display: block;
    margin:auto;
    filter: url(../desaturate.svg#greyscale);
    -webkit-filter: grayscale(1);
   -webkit-filter: grayscale(100%);
   filter: gray;
   filter: grayscale(100%);
   border-left: solid 2px #ff0000;
   border-top: solid 2px #ff0000;
   border-right: solid 2px #ffd200;
   border-bottom: solid 2px #ffd200;
}

Answer 1

您可以将img放入div并应用inline-block和边框属性，就像下面的示例一样

＆＃13;

.article-inline {
  width: 100%;
  text-align:center;
}

.bordercl {
  border-left: solid 2px #ff0000;
  border-top: solid 2px #ff0000;
  border-right: solid 2px #ffd200;
  border-bottom: solid 2px #ffd200;
  display: inline-block;
}

.article-inline img {
  height: 400px;
  max-width: 100%;
  max-height: 400px;
  /* overflow:auto; */
  display: block;
  margin: auto;
  filter: url(../desaturate.svg#greyscale);
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: grayscale(100%);
}

＆＃13;

<div class="article-inline">
  <div class="bordercl">
    <img src="http://lorempixel.com/400/200/sports" />
  </div>
</div>

＆＃13;

如何在使用css过滤器时保留边框

1 个答案: