Url background image css: url() — CSS: Cascading Style Sheets

 <дел>
  Ссылка на журнальную статью

CSS ¶

 #пример-ссылка {
  отступ слева: 15px;
  фон: url(/images/examples/bglinks/pencil_icon.gif) 3px 1px без повтора;
}
 

Объяснение: ¶

Отступ слева — отодвигает текст от изображения. В зависимости от ширины вашего изображения вам понадобится больше или меньше отступов

Фон — содержит правила, связанные с фоновым изображением

• url(/images/examples/bglinks/pencil_icon.gif) — это путь к изображению, которое вы хочу быть твоей иконой.
• 3px 1px — эти значения позиционируют фоновое изображение. Первое значение – это расстояние от фонового изображения слева от тега a, второе — это расстояние от верхней части тега a.
• No-repeat указывает браузеру отображать изображение только один раз.

Код в действии ¶

Простая иконка, примененная к ссылке с помощью CSS. (Если вы читаете это в читатель новостей вы не увидите изображение)

Теги

• УСБ

Можете ли вы помочь сделать эту статью лучше? Вы можете отредактировать его здесь и отправить мне запрос на включение.

См. также

• Написание хороших XHTML и CSS, часть 2
  7 октября 2006 г.
  Второй из серии хороших практик по написанию XHTML и CSS, направленных на написание чистого, поддерживаемого кода и решение адских проблем браузера.

• Подготовка к IE7 — Ограничение взломов CSS
  28 сентября 2006 г.
  Internet Explorer 7 не за горами, и Microsoft предупреждала, что существующие взломы нарушат макеты в IE7.

  Ограничив использование хаков, ваш CSS может быть совместимым как с предыдущими, так и с прямыми версиями.

• Написание хороших XHTML и CSS, часть 1
  26 сентября 2006 г.
  В двух статьях я собираюсь изложить свое мнение о том, что вам нужно для понимания и написания высококачественных XTHML и CSS. В статьях основное внимание будет уделено созданию кода, который выдержит суровые требования Интернета, а также коду будущих доказательств. Статьи предназначены для начинающих программистов, которые хотят освоить написание профессионального клиентского кода. Конечно, если вы с чем-то не согласны, вы можете добавить свое мнение в поле для комментариев. В части 1 я собираюсь посмотреть, что вам нужно, чтобы оторваться от земли.

Фоновые изображения из URL-адреса Elementor не обновляются через прямую ссылку — поддержка

tataganet 28 ноября 2018 г. , 14:55 1

Привет всем,

Я впервые использую Flywheel, и мне это нравится.

Однако у меня проблема с фоновыми изображениями (созданными с помощью Elementor), они не отображаются, когда я перехожу по прямой ссылке. Когда я проверяю элемент с помощью Chrome, оказывается, что URL-адрес background-img по-прежнему mywebsite.local/XXXXX вместо http://e6fdaXXX.ngrok.io/XXXXX

Кажется, что абсолютные URL-адреса не заменяются в таких ресурсах, как CSS, но я не могу предоставить Elementor относительный URL-адрес в этой особой ситуации (фоновое изображение)

Заранее спасибо, надеюсь, я достаточно понятен

Для справки, я использую

• WordPress 4.9.8
• OceanWP v1.5.31
• Элементор v2.3.2

Томас

1 Нравится

татаганет

Если у кого-то возникла такая же проблема, вот исправление, которое я наконец нашел. Не идеально, но на самом деле выполняет свою работу:

Я написал несколько строк в пользовательском CSS с упоминанием «!важно», чтобы вручную заменить URL-адреса

Я нашел фоновый раздел css с помощью инспектора Google Chrome, скопировал его в раздел «Пользовательский CSS» и заменил начало URL-адреса на Live Link URL

Это дает для каждого изображения что-то вроде этого (например):
.elementor-6 .elementor-element.elementor-element-b29dbf8 {
background-image: url(http://e6fdaXXX.ngrok.io/wp-content/uploads/2018/11/background.jpg) !важно;
}

Если у вас есть лучшие решения, не стесняйтесь поделиться ими здесь

Надеюсь, это все еще поможет

Удачи всем вам

Томас

Пиксель 19 декабря 2018 г.

У меня та же проблема, я думаю, что ИСПРАВЛЕНИЕ должно позволить внешним людям полностью просматривать внутренний веб-сайт.
Я использую много фоновых изображений и мне страшно настраивать все CSS

digitalguava 9 февраля 2019 г., 23:52 4

У меня была аналогичная проблема, когда я перенаправлял сайт с локального на маховик, и фоновые изображения не отображались.

Я обнаружил, что в Elementor есть шаги, которые вы можете предпринять, чтобы решить эту проблему, включая перегенерацию CSS, чтобы пути фонового изображения указывали на нужное место.

Посмотрите: https://docs.elementor.com/article/218-i-changed-the-url-of-my-website-and-elementor-does-not-work-anymore

Надеюсь, это поможет другие люди, которые сталкиваются с этой проблемой.

Шонхаррис 7 мая 2020 г., 19:05 5

У меня были похожие проблемы с загрузкой фоновых изображений Elementor на устройства в локальной среде с использованием Local WP с прямой ссылкой.

Вот как я это решил. Руководство по миграции Elementor было очень полезным.

Из руководства по миграции elementor:

Фоновые изображения сохраняются в файле CSS с абсолютным URL-адресом. Чтобы избежать проблем с миграцией фоновых изображений без написания сценария, вы можете определить метод печати CSS как встроенный вместо использования внешних файлов, если хотите. Это можно сделать, перейдя в Elementor> Настройки> Дополнительно> Метод печати CSS> Внутреннее встраивание> Метод печати CSS: встроенный на панели инструментов WP.

Вот что заставило меня работать с фоновыми изображениями elementor на локальных устройствах.

1. В вашей локальной среде установите локальный метод печати Elementor css на «внутреннее встраивание» (Elementor > Настройки > Дополнительно)
2. Провести перезапись URL-адреса (URL-адрес старой среды в URL-адрес новой среды)
3. Восстановить файлы Elementor (Elementor > Инструменты > Общие)

После того, как я сделал это, в моей локальной среде мои фоновые изображения появились на локальных устройствах. Затем я сделал толчок к staging и prod (включая базу данных), чтобы убедиться, что фоновые изображения все еще видны, и они были. Все работало.

Для производства. Elementor указывает на повышение производительности, когда для метода CSS печати Elementor установлено значение «внешний».

Если вы хотите сделать это в рабочей среде, после завершения тестирования устройства выполните следующие действия:

1. В рабочей среде установите локальный метод печати CSS Elementor на «внешний файл» (Elementor > Настройки > заранее)
2. Провести перезапись URL-адреса (URL-адрес старой среды в URL-адрес новой среды)
3. Восстановить файлы Elementor (Elementor > Инструменты > Общие)

Я думаю, что это должно решить проблему с фоновым изображением Elementor при разработке сайтов локально и на устройствах. Пожалуйста, дайте мне знать, если я ошибаюсь.

1 Нравится 24 июля 2020 г., 1:01 6

Спасибо за совет, Шонхаррис.

У меня вопрос по вашему методу.

Если я хочу использовать функцию замены URL-адреса в Elementor, как мне просто изменить URL-адреса с абсолютных на относительные?

Например: у меня загружается фоновое изображение по адресу «http://mysite.local/wp-content/uploads/2020/07/ Assistance-living.jpg», где «mysite» на самом деле является названием моего сайта, но я Защищаюсь здесь в этом форуме.

Допустим, я хочу, чтобы это изображение загружалось в «/wp-content/uploads/2020/07/assisted-living.jpg».

Как для этого использовать инструмент «Заменить URL»? Я не хочу портить мой локальный сайт или ломать изображения, поэтому я был бы признателен за дополнительную информацию о том, как вы этого добились.