Помощь Переключение лого в зависимости от цвета фона

[Ryan_93]

Всем привет!

Видел решения, когда цвет элемента (в данном случае логотип + основное меню) меняет цвет в зависимости от цвета фона "белый / черный".

Кто знает как реализовать это решение?

 

[inturned]

Кто знает как реализовать это решение?

1. Как минимум, если речь идет о PNG файле или об любом изображении, то изменение цвета можно сделать через CSS файлы, если менять стиль другим CSS файлом, то тогда картинку грузим через CSS и прописываем разные лого в разных CSS файлах.
2. Если речь идет о изменении файлов налету, то здесь поможет JS скрипт, который будет подменять файла.

Больше инфы - более точный ответ

 

[Ryan_93]

1. Как минимум, если речь идет о PNG файле или об любом изображении, то изменение цвета можно сделать через CSS файлы, если менять стиль другим CSS файлом, то тогда картинку грузим через CSS и прописываем разные лого в разных CSS файлах.
2. Если речь идет о изменении файлов налету, то здесь поможет JS скрипт, который будет подменять файла.

Больше инфы - более точный ответ

Хотелось бы, конечно сделать это через WP плагин.

А какая тут может быть доп инфа? Есть два варианта:
1. Темный фон и белый логотип
2. Светлый фон и черный логотип
Скрипт в свою очередь определяет сам, какую версию надо отобразить в текущий момент.

 

[inturned]

Ну так чем не вариант сделать через CSS, раз 2 css файла, темный и светлый, лого.
А ну если только через плагин, тогда извините, с плагинами не помогу, предпочитаю обходится без дополнительных плагинов, если оно возможно, здесь я так понимаю переключалка уже работает, если да, то через CSS нормальный вариант.

 

[Denalexeev]

На Для просмотра ссылки Войди или Зарегистрируйся

Логотип задавай через background-img

 

[Nub999]

нашел смену цвета логотипа, возможно пригодится
function changecolor() {
h = Math.floor(360 * Math.random());
s = 30 + Math.floor(70 * Math.random());
v = 30 + Math.floor(50 * Math.random());
$('.fon').css('background', "hsl(" + h + ", " + s + "%, " + v + "% )");
}

//меняем цвет при наведении
$(".fon").mouseover(changecolor);


//меняем цвет по таймеру
setInterval(changecolor,10000);


//меняем цвет при загрузке
changecolor();
.fon {
padding: 20px;
background: #903;
display: inline-block;
transition: background ease .7s
}
.fon img {pointer-events:none}

<script src="Для просмотра ссылки Войди или Зарегистрируйся"></script>
<div class=fon><img src="Для просмотра ссылки Войди или Зарегистрируйся"></div>