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

Question

如何将 CSS3 webkit-filter grayscale 应用于除<figcaption> 标签之外的所有文章标签？以this jsfiddle 为例。

.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

您已将 figcaption 嵌套在带有 grayfilter 的黑白容器中。所以这个块（包括孩子）将永远是灰度的。最好将黑白类仅添加到需要灰度化的元素中。希望这会有所帮助。

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>

您确定没有混淆 transition 和 filter 吗？