如何更改 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 自定义代码

How to change the control bar color in Fancybox 3?