如何更改 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 自定義代碼