Как сделать фон картинкой в css: background-image | htmlbook.ru

33 — Как создать фоновое изображение CSS в Dreamweaver

Привет, меня зовут Дэн. В этом видео мы рассмотрим фоновые изображения. Теперь есть два способа добавления изображений в Dreamweaver. Один из способов, который мы делали ранее, когда мы просто поместили курсор в нужное место, добавили его, и изображение оказалось в нашем HTML. Если я нажму здесь на этого парня и перейду к «Исходный код», вы увидите его здесь, он здесь внутри этой колонки, и он здесь настоящий, его зовут graphic-old-books.jpg, у него есть какой-то альт. текст. Помните, замещающий текст предназначен для того, чтобы люди с нарушениями зрения могли видеть и читать или, по крайней мере, быть прочитанными, что находится на странице. И это отлично подходит для нашего веб-сайта и отлично подходит для Google. Google это нравится.

Теперь есть еще один способ добавления изображений, это фоновые изображения. Он имеет немного другой эффект и не подходит для браузеров с точки зрения программ чтения с экрана. Итак, давайте посмотрим на это. Я вернусь к просмотру в режиме реального времени. Мы собираемся сделать это с этой серой коробкой на заднем плане нашего «группового героя». Итак, в файле Photoshop, вы можете видеть это красивое большое изображение на заднем плане, которое я хочу использовать. Чтобы сделать это, я не могу поместить изображение на входной текст поверх него, это действительно большая проблема с кодами. Итак, самое простое — найти нашего «группового героя» в css. Что мы собираемся сделать, так это спуститься на задний план. И фоновый цвет, который мы собираемся оставить, не должен исчезать, но мы собираемся использовать этот, называемый фоновым изображением. Я нажму на «url», и мы нажмем маленькую кнопку «Обзор». Нажмите еще раз, кнопку «Обзор» еще раз. И я собираюсь прокрутить до своего «Рабочего стола», перейти к «Файлы упражнений Dreamweaver», перейти к «Изображениям», и здесь есть фон, здание. Вот он, хороший большой.

Я сделал это в своем учебном курсе Photoshop. Если вы хотите пойти и сделать такую ​​графику, где мы ее размыли, добавили немного шума, это делается в отдельном курсе. Так что ознакомьтесь с моим курсом Photoshop для веб-дизайна.

Итак, мы создали его, давайте нажмем «Открыть». Здесь он ушел в фоновом режиме, давайте посмотрим на него в браузере. На данный момент он в полном размере и находится там на заднем плане. И это нормально, вы можете полностью оставить это как есть. Проблема в том, что подойдите к мобильному телефону, и вы едва сможете разобрать, что находится на заднем плане. Итак, что мы собираемся сделать, так это использовать небольшую приятную опцию в css. Это называется «Размер». Мы собираемся изменить его на «Обложка». Это «Установить на автоматический режим», полностью помещает его туда. Мы собираемся установить его на «Обложку». Что это делает, так это… следите за фоном, когда я корректирую эти стороны. Поэтому, если я делаю его меньше, он подстраивается в зависимости от размера. Что делает Cover, он пытается подогнать высоту или ширину, в зависимости от того, что наступит раньше. Поэтому, если я проверяю в своем браузере, в этом случае он использует ширину, растягивая ее, но она становится меньше, пока не останется ни одной высоты, а затем оставит ее заблокированной. Таким образом, он просто растянется, чтобы убедиться, что он на 100% покрывает фон. Он очень хорошо работает с фоновыми изображениями.

Теперь проблема с использованием этого, я думаю, вместо того, чтобы просто помещать его как объект, заключается в том, что если я посмотрю на свой HTML, то я щелкнул «банд-герой» и перешел к «просмотру кода». ‘, есть герой группы, здесь нет упоминания об имидже. Так что люди, которые используют программу чтения с экрана, никогда не увидят это изображение, потому что оно представлено в css, который был здесь отдельным файлом. Если я найду здесь героя группы, его представят здесь. Для него нет замещающего текста, и программа чтения с экрана его не произносит. Так что это дополнительный файл, который игнорируется программами чтения с экрана. Поэтому, если вам нужны изображения, которые должны быть частью вашего веб-сайта и считываться, а также использоваться поисковыми системами, это должен быть реальный физический объект. Что касается фонового изображения, нет никакой реальной причины считывать их именно так, как выглядит фоновое изображение. Это всего лишь их очки стиля.

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

фоновое изображение | Фоновое изображение Campaign Monitor

| Монитор кампании

Рабочий стол Посмотреть все 11

Мобильный Посмотреть все 16

Веб-почта

Цвет и фон

Рабочий стол

• Рабочий стол AOL
• Apple Mail 10
• IBM Notes 9
• Перспективы 2000–03
• Перспективы на 2007–2016 годы
• Outlook Express
• Outlook для Mac
• Почтовый ящик
• Тандерберд
• Почта Windows 10
• Почта Windows Live

Мобильный

• Android 4. 2.2 Почта
• Android 4.4.4 Почта
• Приложение AOL Alto для Android
• Приложение AOL Alto для iOS
• Блэкберри
• Приложение Gmail для Android
• Приложение Gmail для Android IMAP
• Приложение Gmail для iOS
• Мобильная веб-почта Gmail
• Почта iOS 10
• Почта iOS 11
• Приложение Outlook для Android
• Приложение Outlook для iOS
• Почта Windows Phone 8
• Yahoo! Приложение Почта Android
• Yahoo! Почтовое приложение iOS

Веб-почта

• Почта AOL
• G Suite
• Gmail
• Outlook. com
• Yahoo! Почта

Дополнительные примечания

Работа с фоновыми изображениями в электронной почте затруднена по ряду причин. Почтовые клиенты имеют ограниченную поддержку фоновых изображений CSS и некоторых свойств для управления отображением фонового изображения, особенно свойств CSS3.

В некоторых почтовых клиентах, которые не поддерживают свойства CSS для фоновых изображений, атрибут HTML background можно использовать в элементах table или для базовой поддержки фонового изображения.

Для поддержки Outlook фоновое изображение HTML или CSS может быть дополнено дополнительной разметкой VML. Дополнительные сведения см. в приведенных ниже ресурсах.

Дополнительные сведения см. в приведенных ниже ресурсах.

Ресурсы

• Пуленепробиваемые фоновые изображения от Campaign Monitor
• Фоновые изображения: часть 1 — изображения контента в качестве фона от Two Blog
• Фоновые изображения.