从 Wordpress 图库中查找并删除灰度效果

Question

敲了一天的脑袋，还是没找到解决办法！

URL: http://wmy.2ec.myftpupload.com/gallery/

我想从画廊缩略图中删除灰度效果，我尝试搜索 CSS 代码，PHP 代码，但无济于事。

Answer 1

我将引导您完成诊断过程。通过右键单击要调试的元素并选择 Inspect.

打开 DevTools

向上单击 DOM 树，直到找到一个看起来具有您要调整的 CSS 属性的元素。

在你的情况下它相对简单，img 标签有一个 filter: grayscale(1) 属性集：

如果您使用的是 Child Theme，您很可能可以编辑 CSS 文件的那一行，然后就大功告成了！

如果您不是，或者不确定，可以在 外观 > 自定义 > 其他 CSS 部分添加 CSS您的网站（或您的 theme/plugins 允许您放置 CSS 或“Header 脚本”的其他任何地方）

您需要一些 CSS，它有一个 higher specificity 来覆盖 CSS。您通常可以只复制突出显示的选择器并在其前面添加 body，或者在存在的某处添加一个 ID。避免使用 !important 除非你绝对必须（覆盖 inline-styles 或其他你无法删除的 baked-in !importants）。

正在添加

body .tm-pg_front_gallery .tm-pg_front_gallery-masonry .tm_pg_gallery-item a img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

或

body .tm-pg_front_gallery .tm-pg_front_gallery-masonry .tm_pg_gallery-item a img,
body .tm-pg_front_gallery .tm-pg_front_gallery-grid .tm_pg_gallery-item a img,
body .tm-pg_front_gallery .tm-pg_front_gallery-justify .tm_pg_gallery-item a img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

应该会为您提供所需的结果：

从 Wordpress 图库中查找并删除灰度效果

Find and Remove Grayscale Effect from Wordpress Gallery

wordpress

hover

effect