Блог

Главная - Вопросы по программированию - Переопределение z-индекса

Переопределение z-индекса

#javascript #css #twitter-bootstrap

Вопрос:

Я использую darkmode.js https://darkmodejs.learn.uno/ библиотека для темного режима. Он использует css mix-blend-mode для того, чтобы включить темный режим. Когда я проверяю вручную, он применяется transform : scale(1) для темного режима.

  <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
    <script>
      function addDarkmodeWidget() {
        new Darkmode().showWidget();
      }
      window.addEventListener('load', addDarkmodeWidget);
    </script>

Он плохо работает с компонентами начальной загрузки (особенно виджетами), поэтому я использовал его в соответствии с документом .

 .darkmode-layer, .darkmode-toggle {
  z-index: 500;
}

Теперь я хочу игнорировать CSS для некоторых виджетов, таких как кнопка (с class .btn-primary), в темном режиме. Я хочу показать фактический цвет кнопки в темном режиме. Я попробовал darkmode-игнорировать , изоляция: изолировать, режим смешивания-смешивания: разница; но это не работает.

Оформить заказ по ссылке jsfiddle — https://jsfiddle.net/27b06hy9/ Я хочу показать цвет фона кнопки (с классом .btn-основной) как синий в темном режиме. Остальные кнопки могут отображаться так же, как и в темном режиме.

Комментарии:

1. Вы использовали !important ?. Добавьте также немного HTML.

2. Да, пытался, но безуспешно

3. Я тоже собирался посоветоваться !важно, но это был выстрел в темноте. Это помогло бы, если бы вы создали полную страницу, показывающую вашу проблему (например, используя jsfiddle).

4. Я просто использовал некоторые компоненты начальной загрузки 4 и darkmodejs. Это работает так, как и ожидалось. Вы можете использовать ссылки css js не в правильном порядке.

5. Спасибо. Я использую bootstrap 3. Не могли бы вы поделиться своим jsfiddle?

Ответ №1:

Насколько я понимаю ваш вопрос, вы хотите чего-то подобного? Screensnip1

Просто добавьте «кнопку» перед вашим классом переключения темного режима в css

 button .darkmode-layer, .darkmode-toggle {
  z-index: 500;
}

Также вы можете поиграть с силой

 all:unset!important;

Комментарии:

1. ПОКА примерно all в CSS.

2. Спасибо. Я пытаюсь конкретизировать это с помощью .btn-начального класса. Я изменил ваш код «кнопка » на». btn-основной», это не сработало

3. «Иногда гораздо проще начать со стиля с нуля, чем бороться со всем, что уже есть».- css-трюки

4. Попался. У тебя нет ответа на этот вопрос. Спасибо!

Метки: