Установка прозрачного фона элементов делает его белым

Question

Я пытаюсь установить прозрачный цвет заголовка на веб-сайте WordPress, чтобы логотип и значок меню отображались поверх других элементов веб-сайта и не имели собственного фона.

Моя проблемаследующие.CSS, который устанавливает цвет заголовка, в моем app.css файле выглядит следующим образом:

header.dark-header {
background-color:#252627;
border-color:transparent;
border-bottom:0;
}

Если я установлю его на прозрачный, фон на самом деле станет белым и не будет прозрачным.

Изображения, объясняющие проблему: https://imgur.com/a/XJta1p1 Демонстрация сайта: http://security4.forebet.ro

Я понятия не имею, что делать и почему это происходит.Кто-нибудь?

Answer 1

transparent является значением по умолчанию для background-color, поэтому, если фон элемента становится белым при использовании, вероятно, значение по умолчанию переопределяется родительским элементом, где background-color имеет явно установленное значение. Если не считать копания таблицы стилей и изменения этого (возможно, лучшего решения), вы можете использовать функцию CSS rgba (), чтобы явно установить непрозрачность фона заголовка в ноль, например:

header.dark-header {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    border-bottom:0;
}

Хотя имейте в виду, что поддержка браузером функции rgba () все еще немного пятнистая .

Answer 2

Настройка background-color: transparent; должна помочь.

Так вот так:

header.dark-header {
    background-color: transparent;
    border-color:transparent;
    border-bottom:0;
}