滑块插件中的图像颜色叠加，叠加上方的文本（wordpress）答案

【问题标题】：Image color overlay in slider plugin, text above overlay (wordpress)滑块插件中的图像颜色叠加，叠加上方的文本（wordpress）
【发布时间】：2026-02-07 14:25:01
【问题描述】：

我正在使用 Wordpress 的元滑块插件。我设计的很大一部分是滑块上的灰色叠加层。我可以设法获得叠加层，但它会覆盖滑块中的标题。

我已经尝试了很多，但我自己无法做到这一点。如何获取叠加层上方的文本？

【问题讨论】：

您想在滑块上显示文本“Home”和“About”吗？你能给出一个或多或少你想要的图像吗？
我不知道 WP，但您需要将覆盖层放在<li> 上作为背景，而不是将其放在顶部。您可以创建一个很小的 png 文件（1x1 像素）并设置为背景。
我想在叠加层上方的文本是“De Bommel in Sneek, voor een hapje en een drankje” 问题是我无法重新定位叠加层 div，因为它是从插件内部生成的。跨度>

标签： javascript jquery html css wordpress

【解决方案1】：

.metaslider .caption-wrap {
    background: rgba(50,50,50, 0.4);
    padding-top:13%;
}

.overlay:before {
    background:none;
}

但请记住，上面的 css 应该在 slider.css 加载后加载，以便 css 规则具有更高的优先级。

【讨论】：

【解决方案2】：

我刚刚在 metaslider 标题框中分配了一个名为 overlay 的类，然后在自定义模式下编辑 css。

.overlay img {
  background-color:white;
  opacity:0.7;
}

【讨论】：