Question

如何将CSS3 webkit-filter灰度应用于除<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嵌套在上面，上面有灰色过滤器。因此，这个块（包括孩子们）将始终被灰度化。更好的方法是将黑白类仅添加到需要灰度化的元素中。希望这会有所帮助。

Answer 2

循环是为所有人设置过渡，并为figcaption指定一个非常快的过渡：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您确定不会混淆过渡和过滤吗？

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

2 个答案: