Свойство содержимого CSS не работает в Firefox

#css #wordpress

Вопрос:

Я пытаюсь переопределить изображение логотипа на сайте WordPress, но вижу, что свойство content CSS работает в Chrome, но не в Firefox.

Я также пытался использовать :before и :after , но, вероятно, я что-то упускаю.

Это страница: https://www.exploringart.co/contact-page /

И это CSS, который я использую:

  body.elementor-page-4930 #site-logo #site-logo-inner a img {
  content:url("....logo_white.png");
 }

1. Каков полный путь logo_white.png ? В вашем фрагменте кода .... указан неправильный путь, поэтому мы не можем вам помочь. Я вижу на вашем живом сайте путь ‘ exploringart.co/wp-content/uploads/2020/12/logo_white.png ‘что приводит к странице с ошибкой 404.

2. Содержимое CSS не будет использовать URL-адрес (недавно я столкнулся с этой проблемой, пытаясь что-то сделать в одном из моих собственных проектов). Содержимое также не будет работать с img тегом. Если вы хотите использовать CSS для отображения изображения, вы захотите использовать background или background-image , но тогда вы столкнетесь с проблемами с обрезкой изображения, для чего все равно потребуется JS для извлечения исходного размера изображения, создания соотношения сторон и установки контейнера с background определенным соотношением сторон. В каком случае логотип должен быть динамичным таким образом с помощью CSS?

3. URL содержимого не работает в Firefox, используйте фоновый CSS или Javascript для изменения SRC

Ответ №1:

Вам необходимо использовать JavaScript, чтобы изменить src атрибут вашего изображения :

 document.getElementById('your-image-id').src = 'path-to-your-image/logo_white.png';

или с помощью jQuery :

 $(".page-id-4930 .custom-logo-link img").attr("src","path-to-your-image/logo_white.png");

Чтобы настроить таргетинг на вашу страницу контактов :

Обратите .page-id-4930 внимание: оно нацелено на вашу страницу контактов, это идентификатор вашей страницы WordPress.

Другим подходом может быть php :

Измените шаблон, удалите img и вставьте свой логотип с помощью css background-image . Затем в css легко настроить таргетинг на вашу страницу и изменить фоновое изображение.
Вы могли бы сделать оператор if :

если это идентификатор страницы = 4930, покажите это изображение, иначе покажите обычное изображение.

 if (page_id = 4930) {
    // show image_contact 
} else {
    // show image_normal
}

1. Хорошо, но если мне нужно сделать это только на определенной странице, лучше ли это делать с помощью css или js?

2. CSS — это не то, как вы хотели бы использовать этот вариант использования. Вы можете использовать add JS, который будет использовать window.location , а затем, возможно, использовать РЕГУЛЯРНОЕ ВЫРАЖЕНИЕ, чтобы проверить, находится ли пользователь на одной из определенных страниц, затем установите обновленное изображение так, как показал здесь Себастьян.

3. Я не очень хорошо разбираюсь в JS, но каков правильный тип EventListener?

4. @user14649759 конечно: вы можете легко настроить таргетинг на определенную страницу (вашу страницу контактов) с помощью jQuery. Я обновил свой ответ.

5. Я должен сделать это в JS, у меня нет jquery