Background image none: background-origin — CSS: Cascading Style Sheets

Добавление изображений Google Maps и OpenStreetMap в качестве фоновых изображений в Tableau

Применяется к: Tableau Desktop

Вы можете добавлять изображения Google Maps или OpenStreetMap в качестве статических фоновых изображений в Tableau, а затем наносить на них точки данных. Чтобы нанести точки данных на фоновое изображение GoogleMaps или OpenStreetMap, вам нужны координаты широты и долготы ваших данных.

В этом разделе описывается, как получить координаты широты и долготы для Google Maps и OpenStreetMap, а также как нанести их на фоновое изображение в Tableau.

Шаг 1. Найдите координаты карты

Выполните следующие шаги, чтобы найти координаты карты для Google Maps или OpenStreetMaps.

Вариант 1. Сопоставьте точки данных с Google Maps

1. Перейдите на http://www.gorissen.info/Pierre/maps/googleMapLocation.php(ссылка откроется в новом окне) и найдите географическую область, для которой вы хотите нанести точки данных.

2. После того, как вы нашли нужную область, наведите указатель мыши на самую восточную сторону области и запишите координату долготы (отображается в правом нижнем углу карты). Сделайте то же самое для самой западной стороны области.

3. Наведите курсор на самую северную часть области и запишите координаты широты. Сделайте то же самое для самой южной части области.

   Теперь у вас должны быть две координаты широты (одна верхняя и одна нижняя) и две координаты долготы (одна восточная и одна западная).

   Вы будете использовать эти координаты для определения масштаба фонового изображения в Tableau, а также для обеспечения возможности нанесения точек данных на изображение с использованием координат широты и долготы.

4. Сделайте скриншот карты и сохраните его на свой компьютер.

5. Выполните шаги, описанные в разделе «Шаг 2. Добавьте изображение карты в качестве фонового изображения», чтобы добавить изображение в качестве фонового изображения в Tableau.

Вариант 2. Сопоставьте точки данных с картой в OpenStreetMap

1. Перейдите на http://www.openstreetmap.org(ссылка откроется в новом окне) и увеличьте масштаб географической области, в которой вы хотите нанести точки данных.

2. В верхней строке меню нажмите Экспорт .

   Панель Экспорт предоставляет координаты широты и долготы области в представлении. Вы можете изменить эти координаты, чтобы выбрать другую область.

3. Запишите координаты, отображаемые в поле.

4. В правой части страницы щелкните значок общего доступа, а затем нажмите кнопку Загрузить .

5. Выполните шаги, перечисленные в «Шаг 2. Добавьте изображение карты в качестве фонового изображения», чтобы добавить изображение в качестве фонового изображения в Tableau.

Шаг 2. Добавьте изображение карты в качестве фонового изображения

1. Откройте Tableau Desktop и подключитесь к данным, которые вы хотите нанести на изображение карты.

2. Выберите «Карты» > «Фоновые изображения» и выберите источник данных, который вы хотите использовать для нанесения данных на фоновое изображение.

3. В диалоговом окне «Фоновые изображения» нажмите «Добавить изображение».

4. В диалоговом окне «Добавить фоновое изображение» нажмите «Обзор», а затем перейдите к местоположению изображения карты, которое вы создали ранее на шаге 1. Найдите координаты карты.

5. В диалоговом окне «Добавить фоновое изображение» выполните следующие действия:

   • В раскрывающемся списке X Field выберите Долгота (создано).

   • В поле Left введите самую восточную долготу на изображении карты.

   • В поле Right введите крайнюю западную долготу на изображении карты.

   • В раскрывающемся списке Поле Y выберите Широта (сгенерированная).

   • В нижнем поле введите самую южную широту на изображении карты.

   • В поле Верх введите самую северную широту на изображении карты.

6. По завершении нажмите кнопку «ОК» в диалоговых окнах «Добавить фоновое изображение» и «Фоновые изображения».

7. Выберите Карты>Фоновые карты>Нет.

   Фоновое изображение отображается только при отсутствии фоновой карты.

8. На панели «Меры» перетащите Широта (созданная) на полку строк и

   Долгота (сгенерированная) на полку столбцов.

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

9. В виде дважды щелкните ось Y.

10. В диалоговом окне «Редактировать ось» в разделе «Диапазон» выберите Фиксированная .

11. В текстовом поле Fixed start введите самую нижнюю долготу на изображении карты.

12. В текстовом поле Фиксированный конец

    введите самую верхнюю долготу на изображении карты.

13. Нажмите OK .

14. Повторите шаги 9–13 для другой оси.

Чтобы узнать, как наносить данные на фоновое изображение, см. шаги 1, 2 и 4 в разделе Поиск координат фонового изображения (ссылка откроется в новом окне).

См. также:

Использование фоновых изображений в представлениях (ссылка открывается в новом окне)

Найти координаты фонового изображения(ссылка открывается в новом окне)

Использовать карты Mapbox(ссылка открывается в новом окне)

Использование серверов службы веб-карт (WMS)(ссылка открывается в новом окне)

Выбрать фоновые карты(ссылка откроется в новом окне)

Спасибо за отзыв!

Как и когда браузеры загружают изображения — CSS Wizardry — Оптимизация веб-производительности

11 июня 2018 г.

Написано Гарри Робертсом на CSS Wizardry .

Содержание

1. Фон
2. фоновое изображение
   1. Что я ожидал
   2. Что происходит на самом деле
      1. Хром (v67. 0.3396.79)
      2. Сафари (v11.1 (13605.1.33.1.4))
      3. Firefox (v60.0.1)
      4. Опера (v53.0.2907.68)
      5. Край (v17.17134)
   3. Резюме
   4. Вердикт
3. 1. Что я ожидал
   2. Что происходит на самом деле
      1. Хром
      2. Сафари
      3. Фаерфокс
      4. Опера
      5. Край
   3. Резюме
   4. Вердикт
4. Ключевые выводы
   1. Факты
   2. Как это может повлиять на вас?

В этом году я тесно сотрудничал с замечательным Команда Coingaming в прекрасном Таллинн. У нас есть очень усердно работали над тем, чтобы сделать свой набор онлайн-продуктов намного быстрее, и я был техническим консультантом, руководившим проектом. Это было невероятно весело и вознаграждающее участие, и мы сделали некоторые реальные деловые и ориентированные на клиентов улучшения. Одна из ключевых причин, по которой я нашел этот проект таким забавным, заключается в том, что он дал мне реальный шанс получить очень судебную экспертизу. Естественно, команда всегда должна сначала займитесь низко висящими фруктами, но как только это будет сделано, вы сможете многое вникнуть глубже в сорняки. Этот пост в блоге взят оттуда.

Фон

Для того, чтобы получить лучший контроль над тем, как серия эскизов изображений отображаются на главной странице одного из их продуктов, команда решила создать их не как элементы , а как CSS background-image s: это позволяло им лучше размер и расположение изображений в их контейнере, и, отложив в сторону любые семантические проблемы, это имело смысл с точки зрения стиля. Мое только оговоркой было знать, что, поскольку изображения определены в CSS, а не HTML, их исходящие запросы не начнутся, пока браузер не создаст Дерево рендеринга: пока весь CSS не будет загружен, проанализирован и CSSOM сконструировал так, что браузер действительно знает Это div с этим классом в настоящее время отображается на странице, и его фоном является это изображение: я бы лучше скачать!

.

Водопад ниже показывает, что браузер ожидает завершения CSSOM, прежде чем он отправляет любые запросы на любые изображения — вы можете ясно видеть, что CSS должен закончите до того, как начнутся какие-либо изображения. Это связано с тем простым фактом, что браузер не знает, какие изображения (если вообще будут) ему понадобятся, пока не будет построена CSSOM:

Водопад, показывающий, что фоновые изображения не могут быть загружены, пока CSSOM завершен.

Слишком поздно для такого важного их контента — пользователи хотят видеть эскизы как можно скорее.

Путем перемещения изображений на элементов (что также семантически больше уместно), браузер может обнаружить их гораздо раньше, поскольку они становятся доступными для сканера предварительной загрузки браузера — и отправлять их запросы до (или параллельно к) завершение CSSOM:

Водопад, показывающий, как можно загружать обычные элементы изображения независимо от конструкции CSSOM.

Это то, что мы уже знали:

1. Браузеры не смогут загрузить background-image s, пока не создадут ЦСОМ.
2. Браузеры не должны основывать — таким образом, задерживать — загрузку s на CSSOM завершение. Подробнее об этом позже…

Что становится интереснее, так это то, что я начал задаваться вопросом, как разные браузеры обрабатывать разные типы изображений независимо от того, видны они или нет: элемент с дисплеем : нет; , примененный к нему, в идеале не будет загружен, но единственный способ, которым браузер узнает, что изображение действительно скрыто, — это если оно ожидает завершения CSSOM, что замедляет поведение по умолчанию : что произойдет?

---

фоновое изображение

Я начну с background-image , так как это первоначальный вариант использования моего клиента. был. Я чувствую, что поведение background-image должно быть самым предсказуемым, так как в игре есть определенные невозможности (например, мы не можем загрузить background-image , пока мы не создадим CSSOM).

Что я ожидал

У меня есть пара ожиданий (или надежд), которые я предсказываю:

1. Браузеры не запускают (не могут) загрузку фонового изображения до тех пор, пока он знает, что он ему нужен (т. е. до тех пор, пока CSSOM не будет создан).
2. Браузеры не будут загружать фоновое изображение , которое применяется к элементу который скрыт от просмотра (например, display: none; ).

Что происходит на самом деле

Хром (v67.0.3396.79)

• Ожидается Chrome не загружает background-image до CSSOM было построено: Посмотреть полный размер/качество
• Неожиданно , Chrome загрузит фоновое изображение , которое не видно пользователю: Посмотреть полный размер/качество

Сафари (v11.1 (13605.1.33.1.4))

• Ожидаемо Safari не загружает background-image до CSSOM было построено: Посмотреть полный размер/качество
• Ожидается , Safari не будет загружать фоновое изображение , которое не видно пользователю: Посмотреть полный размер/качество

Firefox (v60.

0.1)

• Ожидается Firefox не загружает фоновое изображение до тех пор, пока CSSOM был построен: Посмотреть полный размер/качество
• Ожидается , Firefox не будет загружать background-image это не так видно пользователю: Посмотреть полный размер/качество

Опера (v53.0.2907.68)

• Ожидается Opera не загружает background-image до CSSOM было построено: Посмотреть полный размер/качество
• Неожиданно , Opera загрузит фоновое изображение , которое не видно пользователю: Посмотреть полный размер/качество

Край (v17.17134)

• Ожидается, что Edge не загрузит фоновое изображение , пока CSSOM был построен. Посмотреть полный размер/качество
• Неожиданно , Edge загрузит фоновое изображение , которое не видно пользователю. Посмотреть полный размер/качество

Резюме

N.B. Да или Нет представляет фактическую информацию. ✓ и ✗ представляют то, что я считаю хорошим/ожидаемым и плохим/неожиданным поведением, соответственно.

	Хром	Сафари	Firefox	Опера	Край
Блок на CSSOM	Да ✓	Да ✓	Да ✓	Да ✓	Да ✓
Скачать, если невидимый	Да ✗	Нет ✓	Нет ✓	Да ✗	Да ✗

Вердикт

Firefox и Safari , кажется, имеют здесь наиболее предпочтительное поведение: они не будут загружать background-image , которые, как они знают, им не понадобятся.

Chrome , Opera и Edge будут загружать background-image s, которые применяются к невидимым элементам. Это кажется расточительным, но я подозреваю, что это упреждающая оптимизация для обеспечения того, чтобы образ был на клиенте до того, как потенциальное событие, при котором элемент становится видимым. Я чувствую, что если это случай — это оптимизация, которую следует оставить разработчику.

---

Теперь давайте посмотрим, как браузеры обрабатывают s.

Что я ожидал

1. Браузеры будут загружать полностью независимо от CSSOM строительство. Блокировка на построении CSSOM кажется очень неэффективно и приведет к задержкам при загрузке контента.
2. Соответственно браузеры будут скачивать , которые в конечном итоге скрыты от view , т. е. display: none; . Если браузер начинает скачивать до построения CSSOM (как я ожидаю), тогда он не может знать , но нужен этот образ или нет.

Что происходит на самом деле

Хром

• Ожидаемо , Chrome не будет блокировать запросов на CSSOM строительство: Посмотреть в полном размере/качестве
• Ожидаемо , в результате вышесказанного Хром скачает что в конечном итоге становятся невидимыми: Посмотреть полный размер/качество

Сафари

• Ожидается , Safari не будет блокировать запросов на CSSOM строительство: Посмотреть полный размер/качество
• Ожидаемо , в результате вышесказанного Safari скачает что в конечном итоге становятся невидимыми: Посмотреть в полном размере/качестве

Firefox

• Неожиданно , Firefox заблокирует запросов на построение CSSOM. Это означает, что запросов не отправляются до тех пор, пока CSSOM не будет построен. Это представляет собой удивительную неэффективность: Посмотреть полный размер/качество
• Неожиданно , несмотря на то, что Firefox знал, что ему не понадобится — как в результате его неожиданной блокировки при построении CSSOM — он все равно будет скачать даже если знает, что не будет видно. я нахожу это чрезвычайно странно: кажется, что-то не так в обоих случаях: Посмотреть полный размер/качество

Опера

• Ожидаемо , Opera не будет блокировать запросов на CSSOM строительство: Посмотреть полный размер/качество
• Ожидаемо , в результате вышесказанного Опера скачает что в конечном итоге становятся невидимыми: Посмотреть в полном размере/качестве

Край

• Ожидается , Edge не будет блокировать запросов на CSSOM строительство: Посмотреть полный размер/качество
• Ожидаемо , в результате вышесказанного Edge скачает что в конечном итоге становятся невидимыми: Посмотреть полный размер/качество

Резюме

N. B. Да или Нет представляет фактическую информацию. ✓ и ✗ представляют то, что я считаю хорошим/ожидаемым и плохим/неожиданным поведением, соответственно.

	Хром	Сафари	Firefox	Опера	Край
Блок на CSSOM	Нет ✓	Нет ✓	Да ✗	Нет ✓	Нет ✓
Скачать, если невидимый	Да ✓	Да ✓	Да ✗	Да ✓	Да ✓

Вердикт

Firefox блокирует при построении CSSOM. Это похоже на плохая идея — никакие s не начнут скачиваться, пока Firefox не загрузится, проанализированы и применены CSS. Это означает, что если у вас есть блокирующие таблицы стилей, они блокируют ваш . Это было бы особенно проблематично, если бы <изображение /> — ключевой контент (например, Imgur, Flickr и т. д.).

Firefox становится еще страннее! Он ждет, пока не создаст CSSOM, прежде чем он запускает любые запросы , что означает, что он знает, будет ли быть видимым или нет, но если невидимый, он его скачает в любом случае. Это двойной удар: Firefox блокирует при построении CSSOM. все еще скачивает , которые не видны.

---

Основные выводы

Факты

• Chrome , Opera и Edge загрузит фоновое изображение s, которое не требуются для первого рендера. Это означает, что скрытые узлы DOM, имеющие фоновое изображение , примененное к ним, по-прежнему будет иметь это фоновое изображение . скачал. Остерегайтесь неожиданных загрузок.