如何更改 Fancybox 3 中的控制栏颜色？

Question

我想更改我的 Fancybox 3 画廊控件的颜色，因为默认值几乎不可读。

我已经加载了一个单独的 Fancybox 样式表，它允许我更改背景的颜色。 不过，我找不到使用相同方法更改控件颜色的方法。

fancybox.css的内容：

.fancybox-bg {
    background: #ccc;
}

.fancybox-is-open .fancybox-bg {
    opacity: 0.4;
}

Answer 1

利用

.fancybox-bg {
    background: #ccc !important;
}

Answer 2

请使用父元素或 class 或 id 覆盖插件 css。 例如

div.fancybox-bg{...} 或.class_name.fancybox-bg{...}

Answer 3

您应该更具体地说明要更改的颜色，但是如果您参考右上角的按钮，则可以通过调整.fancybox-button class 来做到这一点，例如：

.fancybox-button {
  background: red;
  color: #fff; /* Tip: This will change icon color */
  padding: 0; /* Tip: Change padding to resize icon */
}

重要提示：确保在包含 fancybox.css 之后添加您的 CSS 自定义代码