如何将 CSS3 滤镜灰度应用于除 figcaption 标签之外的所有属性？

Question

如何将CSS3 webkit-filter灰度应用于除<figcaption>标签外的所有文章标签?请看下面这个示例:

.black-white {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  transition: all 0.3s ease-out !important;
  -webkit-transition: all 0.3s ease-out !important;
  -moz-transition: all 0.3s ease-out !important;
  -ms-transition: all 0.3s ease-out !important;
  -o-transition: all 0.3s ease-out !important;
}
.black-white:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

<article class="black-white">
  <figure class="featured-image">
    <a href="#">
      <figcaption>
        <img src="http://www.digital-lab.eu/wp-content/uploads/2016/06/logo-pietro-castro.png" alt="Logo Pietro Castro" class="project-logo" />
      </figcaption>
      <img src="http://www.digital-lab.eu/wp-content/uploads/2016/06/pietro-castro.jpg" alt="Pietro Castro" width="900" height="900" />
    </a>
  </figure>
</article>

Answer 1

您已经将图片标题嵌套在黑白容器中，该容器上有灰度滤镜。因此，这个块(包括子块)将始终是灰度化的。最好是将black-white类只添加到需要灰度化的元素中。

Answer 2

walk-around是为所有人设置过渡，并为figcaption指定一个非常快的过渡:

transition: all 0.3s ease-out, figcaption img 1ms;

.featured-image figcaption {
  padding: 3em;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.project-logo {
  display: table-cell !important;
  vertical-align: middle;
  left: 0;
  right: 0;
  position: absolute !important;
  bottom: 0;
  top: 0;
  margin: auto;
  max-width: 220px !important;
}
.portfolio-grid.three-columns article:nth-child(3n+1) {
  clear: left;
}
.portfolio-wrap .three-columns article {
  width: 33.3%;
}
.black-white {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  transition: all 0.3s ease-out, figcaption img 1ms !important;
  -webkit-transition: all 0.3s ease-out, figcaption img 1ms !important;
  -moz-transition: all 0.3s ease-out, figcaption img 1ms !important;
  -ms-transition: all 0.3s ease-out, figcaption img 1ms !important;
  -o-transition: all 0.3s ease-out, figcaption img 1ms !important;
}
.black-white:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

<article class="black-white">
  <figure class="featured-image">
    <a href="#">
      <figcaption>
        <img src="http://www.digital-lab.eu/wp-content/uploads/2016/06/logo-pietro-castro.png" alt="Logo Pietro Castro" class="project-logo" />
      </figcaption>
      <img src="http://www.digital-lab.eu/wp-content/uploads/2016/06/pietro-castro.jpg" alt="Pietro Castro" width="900" height="900" />
    </a>
  </figure>
</article>

你确定你没有混淆过渡和过滤器吗?