Как вставить на задний фон картинку в html: Как добавить фоновый рисунок на веб-страницу?

Как вставить фоновое изображение в html

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.

Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо « заточены » руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html . Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

• Цвет;
• Фоновую картинку;
• Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:

Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:

Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .

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

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

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

Наверное, четырех улыбающихся лошадей с крыльями поэтам будет чересчур много для вдохновения. Поэтому запрещаем клонирование нашего Пегаса. Делаем это с помощью свойства background-repeat . Возможные значения:

• repeat-x – повторение фонового изображения по горизонтали;
• repeat-y – по вертикали;
• repeat – по обеим осям;
• no-repeat – повторение запрещено.

Среди перечисленных вариантов нас интересует последний. Перед тем, как поменять фон сайта, используем его в своем коде:

Но, конечно, лучше, если бы наш летун расположился посредине экрана. Свойство background-position как раз и предназначено для позиционирования фонового рисунка на странице. Задавать координаты расположения можно несколькими способами:

• Ключевым словом ( top , bottom , center, left, right) ;
• Процентами – отсчет начинается от верхнего левого угла;
• В единицах измерения ( пикселях ).

Воспользуемся самым простым вариантом центрирования:

Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment . Принимаемые им значения:

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?

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

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Для наглядности мы добавили текст и задали его цвет с помощью свойства color . Вот что получилось:

Средства CSS

Все свойства, описанные выше, также применимы и для каскадных таблиц стилей. Создадим фон сайта css , переписав код одного из наших предыдущих примеров:

Результат будет аналогичным.

Ну, вот мы и рассмотрели все варианты, как поменять фон на сайте. Теперь осталось лишь создать рисунок будущего ковра и расстелить его на страницах своего ресурса. Но это уже ваших рук дело.

В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.

Картинка в качестве фона страницы – HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:

Как в примере выше, рекомендуется помимо картинки указывать и цвет фона (он будет отображаться на сайте во время загрузки страницы), который будет максимально сочетаться с фоновым изображением и создавать контраст с текстом на сайте. Например, если вы используете белый цвет текста на сайте, то стоит указать темный цвет фона и задать темное фоновое изображение. В таком случает текст будет легко читаться.

Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.

Картинка в качестве фона страницы – CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

В конструкторе сайтов «Нубекс» для любого сайта можно использовать большое изображение в качестве фона и закрепить его.

Тег img

В HTML изображения вставляются с помощью тега img.
Тег img — пустой, он содержит атрибуты и у него нет закрывающего тега.

Для отображения изображения на странице используется атрибут src. Src появилось от source, что означает Источник. Значением атрибута src является url-адрес изображения.

Строка выше означает, что изображение находится в той же директории (папке), что и сам html-файл, ссылающийся на данное изображение. Допустим, у Вас есть папка html, в которой содержится index.html с указанным выше кодом и само изображение с названием image.jpg.

В таком случае при открытии index.html в браузере Вы увидите данное изображение. Если же оно у Вас где-либо в другом месте (на папку выше или ниже), то вместо этого у Вас отобразится либо белое поле, либо небольшой прямоугольник с красным крестиком (не удалось загрузить изображение).

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

Атрибуты тега img

Помимо src у тега img есть и другие атрибуты, которые отвечают за размеры отображаемого изображения, подпись к нему и прочее.

src – адрес изображения
width – ширина изображения
height – высота изображения
title – подпись, которая высвечивается при наведении на изображение
alt – альтернативный текст. Нужен для поискового робота и индексации изображений
border – толщина границы изображения. 0 – нет границы, 1 – самая тонкая граница и тд

Адрес вставленного изображения (примеры)

Как правило, изображения хранятся не в той же папке, что и сам html-файл. Для этого в той же директории создаётся папка images (или img, тут на вкус и цвет). А в неё уже кладутся все нужные изображения. В случае с отдельным хранением нужно будет прописывать для атрибута src уже другой адрес

Если файл лежит на папку выше, то так

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

Фоновое изображение в HTML

В качестве фонового изображения могут выступать файлы с расширениями gif, jpg, jpeg и png. В том случае, если размер изображения меньше окна браузера, то изображение будет автоматически дальше заполнять оставшийся фон. В body используем атрибут background, в котором прописываем путь к изображению

Как в Photoshop вставить картинку на фон, слой или другое фото?

Доброго всем времени ! Продолжаем изучать такую замечательную программу, как фотошоп. В сегодняшнем обзоре поговорим о том, как работать с картинками. Это весьма полезная функция, освоив которую можно спокойно создавать разного типа коллажи из нескольких небольших изображений.

Навыки эти будут полезны, если приходиться работать с рамками. Например, вы хотите фото своего ребенка поместить в новогоднюю рамку и подарить красивый портрет, да мало ли чего еще можно делать. Словом, пригодиться.  Сегодня будут простые  и легкие приемы с видео по теме. Читаем, запоминаем, берем на вооружение!  Итак…

Небольшое изображение можно вставить так, что бы оно находилась как на заднем плане, так и на переднем. Вставляя фото, само собой придется изменять и его размеры. Ну и самое интересное, что особенно привлекает многих – это вырезание головы объекта и вставка ее в другую картинку. Захотите удивить своего товарища, «отрежьте»  ему голову и присоедините ее, например к Сталлоне или Шварценеггеру. Обо всех этих приемахи будет рассказано в статье.

И еще, одно о чем хотелось бы упомянуть. Если на передний план помещается картинка целиком, то для удобства она должна быть на прозрачном фоне, то есть иметь формат png. Работать так будет проще и быстрее.

Сначала научимся совмещать изображения без каких-либо действий и трансформаций. Открываем программу и через меню «Файл» — «Открыть» выбираем  любую фотографию-фон. Ее так же можно вставить и простым перетягиванием из папки размещения в окно программы. Что бы удобно было работать,  как всегда в окне слои создаем копию фона.

Далее, аналогичным образом через меню — «Файл»- «Открыть» выбираем еще одно фото для вставки. Оно откроется уже  в другом окне.

Открываем это окно, выбираем инструмент «Прямоугольная область», обводим картинку.

По краям картинки увидим мерцающую пунктирную линию. Теперь копируем выделенную картинку с помощью команды «Редактирование» — «Копировать». Открываем фоновую картинку и через пункт верхнего меню «Редактировать»- «Вставить» вставляем. Изображение появится на переднем плане.

Вот что получилось. Обратите внимание, что вставляемая картинка в окне слоев легла поверх фоновой. Это значит, что она находится на переднем плане.

Ее можно переместить на задний план, то есть переместить слой вниз в рабочей области «Слои».  Однако вставленную картинку не будет уже видно.

Для того, что бы картинка на заднем плане была видна, выделяем слой с фоном. Выше открываем меню с выпадающим списком и в нем выбираем пункт «Затемнение». В результате картинка на заднем плане появилась. Причем, заметьте, белый фон, на котором она была исчез.

Второй вариант, как можно вставить картинку не используя команду меню «Файл — «Открыть» – это сразу перетащить картинку из места расположения на фон.

Здесь, заметьте, на картинке появились направляющие, по которым можно отредактировать вставленную картинку. Растянуть, ужать, изменить размеры, повернуть.

Отредактировав картинку, нажимаем клавишу «Enter» и направляющие исчезнут. Однако картинка находится на белом фоне. Если применить к ней функцию «затемнение», то фон исчезнет, как в описанной выше операции. Таким образом, подытожим:

• картинку можно вставить путем простого перетаскивания из места расположения прямо на фон.
• картинку загружаем непосредственно в программу, копируем ее и вставляем на фоновую картинку.

Вставляем изображение в картинку и уменьшаем

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

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

Не забываем после изменений нажать «Enter», чтобы линии исчезли и картинка приняла изменения. Если же вы картинку вставляли из самой программы путем копирования, то ее размеры изменяются через меню «Редактирование — «Трансформирование» — «Масштабирование».

Вокруг картинки появится рамка с квадратиками по углам и середине. Если нажав клавишу «Shift» и зажав правой кнопкой мыши один из уголков, то картинка будет изменять размеры пропорционально. Если клавишу «Shift» не нажать, то картинка изменяет размеры неравномерно.

Как в фотошопе вставить картинку в картинку и покрасить ее в цвет фона?

Для чего это бывает нужно?  Например, у нас имеется фотография какого-либо памятника, где необходимо поменять фон. Для этого загружаем в фотошоп картинку фона с небом. Копируем сюда картинку с памятником. Обратите внимание, что на окне слоев картинка со скульптурой находится выше фона, на переднем плане.

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

В результате рядом с картинкой памятника увидим белый квадрат. При этом на панели инструментов основной цвет должен быть черным, а дополнительный – белым. На полученном слое-маске будем заменять фон. Для этого на панели инструментов выбираем «Кисть». А на панели слоев выбираем маску, кликнув по ней мышкой.

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

В результате получаем такое вот изображение с измененным фоном, то есть, закрашенным в цвет фона.

Вставляем картинку в картинку и делаем ее прозрачной, без фона

Перечисленные операции хороши для тех картинок, которые находятся на однородном фоне, например белом. Сделать их прозрачными при этом будет совсем не сложно. Если фон неоднородный, то придется, что называется, «попотеть». Итак, загружаем картинку как фон, копируем на нее вторую, у которой будем убирать белый фон.

Убрать фон можно несколькими способами. Об одном из них говорилось ранее. Переносим слой с картинкой ниже слоя фона и применяем к фону стиль «Затемнение». В результате на картинке проявится слой, который был перенесен вниз и уже без белого фона.

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

Далее, кликаем этим инструментом по белому фону и получим пунктирное выделение объекта.

Теперь нажимаем клавишу «Delete» и фон удалится. Вот и вся процедура. Если объект имеет ровные стороны, без резких углов сложных границ, то можно воспользоваться инструментом «Магнитное лассо».

Этим инструментом выделяем по контуру объект, после чего выбираем «Выделение» => «Инверсия» и уже потом «delete». Фон удалится. Эти способы хороши при однотонном фоне. Если же фон по цвету неоднороден, то необходимо воспользоваться режимом «Быстрая маска».

Выбираем режим, выбираем инструмент кисть и проводим ею по объекту.

По окончании работы кистью снова нажимаем на инструмент «Быстрая маска», а после — «Delete». Объект остался без фона.

Если он получился не очень контрастным, светлым, то проводим коррекцию во вкладке «Изображение». Там имеются все необходимые для этого инструменты.

Вставка изображения в слой (выделенную область)

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

Если вы выделяли при помощи инструмента «волшебная палочка», то на следующем этапе необходимо открыть вкладку «выделение» и выбрать там «Инверсия».

Таким образом мы выделим сам объект а не фон вокруг него. Теперь делаем копию («Редактирование» — «Копирование»), открываем нужный рисунок и   через «Редактирование» — «Вставить» завершаем операцию.

Выделяем лицо человека и вставляем  в другую фотографию (картинку)

Подобная функция полезна, когда мы имеем какой-то шаблон – объект куда можно вставить голову человека. Это используется часто для дружеских коллажей, поздравительных открыток и пр. Например, не всегда можно найти нужный костюмчик, одеть в него ребенка, создать соответствующий фон и сфотографировать. Скачав же нужный шаблон и вставив в него лицо ребенка – получим нужный вариант без всяких затруднений.

Порядок действий тот же. Выбираем сначала фоновое фото. Потом выбираем фото ребенка, ну или кого-то еще. Выделяем голову любым удобным способом и копируем. После чего вставляем в первую картинку, подвигаем, что бы все легло – в результате получаем нужное нам фото. Ниже приведен очень простой пример этого действия. Вот и все операции по вставке картинок. Удачи!

Автор публикации

0

Комментарии: 1Публикации: 179Регистрация: 02-12-2017

Вопрос: Как добавить фоновое изображение в HTML? — Компьютеры и электроника

Содержание статьи:

Уроки HTML, CSS / Как сделать фон

Показать описание

Привет друзья! Сегодня мы с вами рассмотрим, как сделать фон у элементов в HTML это очень полезное свойство, которое поможет вам, например, выделить текст на странице, для того чтобы он бросался в глаза или был лучше виден, когда у вас есть еще какой-то фон..
Тег [background-color] используется для задания фона у элементов html..
Пример.
[h2 style=”background-color: red;color: white;padding-left: 20px;”]Смена фона пример[/h2].
[p style=”background-color: lightgreen; padding: 20px;”]тест фона 2 тест фона 2[/p].
[div style=”background-color: blue; color: white;”]блок элемент 3 блок элемент 3 [/div].
***Внимание, в YouTube в описании вместо угловых скобок используются квадратные – не забудьте поменять в обратной последовательности .
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: https://wiseplat.org/.
1) Урок на сайте Wiseplat.
✔ Сообщество программистов: https://wiseplat.org/.
✔ –
Вступай в группу Вк https://vk.com/wiseplat .
Группа FaceBook https://www.facebook.com/wiseplat/.
Инстаграм Wiseplat: https://www.instagram.com/wiseplat/.
Instagram: https://www.instagram.com/shpaginoleg/.
Twitter https://twitter.com/WiseplatSchool.
********************************.
Если Вам понравилась публикация, подписывайтесь на канал!
.
Ставьте лайки, тогда будем еще писать такой контент:).
Если есть вопросы или пожелания, то пишите, в комментариях..
********************************.
Уроки от #OlegShpagin ‍.
#урокиhtml #урокиcss #программированиедлядетей #версткасайта #фон

Видео взято с канала: Изучаем мир ИТ / Олег Шпагин / WISEPLAT

Изучение CSS/CSS3 | #6 Как указать задний фон картинкой CSS

Видео взято с канала: Гоша Дударь

КАК ДОБАВИТЬ ФОН В HTML

Видео взято с канала: Katerina Kolosova

Работа с фоном как добавить фоновое изображение на веб-страницу (Основы HTML и CSS)

Видео взято с канала: Dmitriy Sleptsov

КАК СДЕЛАТЬ КАРТИНКУ ФОНОМ НА HTML | ФОН ИЗОБРАЖЕНИЕ

Видео взято с канала: Webizon

Почему не работает background-image и Не отображается фон страницы, Видео курс по CSS, Урок 25

Видео взято с канала: ITDoctor

Как сделать фон для html сайта.

Видео взято с канала: Егор Каплун

Фиолетовый фон на телефон — 64 фото

1

Королевский фиолетовый

2

Фиолетовая обойки

3

Фиолетовые обои

4

Красивый фон для девочки

5

Фиолетовый фон для рабочего стола телефона

6

Сиреневые блестки

7

Фиолетовые листья

8

Фиолетовые обои на телефон

9

Сиреневые обои на телефон

10

Красивый фон для телефона

11

Темно сиреневый

12

Черно фиолетовый

13

Темные цветы

14

Фон абстракция

15

Фиолетовый с блестками

16

Сиреневые Кристаллы

17

Красивый фиолетовый цвет

18

Сиреневые обои

19

Неоновые бабочки живые

20

Фиолетовые лепестки

21

Красивый фиолетовый цвет

22

Фиолетовые капли

23

Сиреневые Кристаллы

24

Фиолетовая звезда

25

Фон цветов на рабочий стол

26

Черно фиолетовый

27

Фон для рабочего стола бабочки

28

Фон с цветами

29

Фиолетовые кубики

30

Фон в фиолетовых тонах

31

Фиолетовый вертикальный

32

Обои на планшет однотонные

33

Фиолетовые узоры

34

35

Фиолетовые обои на телефон

36

Сине фиолетовая абстракция

37

Фиолетовый фон вертикальный

38

Фиолетовые обои

39

Яркий фон

40

Цветы на темном фоне

41

Красивый фон для телефона

42

Красивый сиреневый

43

Фиолетовые обои

44

Фиолетовый вертикальный

45

Стильный фон на телефон

46

47

Фиолетовый цвет

48

Обои на рабочий стол абстракция

49

Тёмно фиолетовый фон

50

Розовый и черный узор

51

Фракталы на рабочий стол

52

Фиолетовый фон

53

Фиолетовые обои

54

Фиолетовая заставка

55

Фиолетовые обои

56

Красивый фиолетовый цвет

57

Красивый фон на телефон вертикально

58

Сиреневые обои на телефон

59

Лиловая абстракция

60

Фиолетовые цветы

61

Фиолетовый фон

62

Темно фиолетовый

63

Розовый лист

Установка изображения в качестве фона для таблицы на веб-странице

Отделение таблиц от их фона помогает выделить содержимое таблицы по сравнению со всем остальным на веб-странице. Чтобы добавить фон таблицы, вам необходимо внести изменения в каскадную таблицу стилей, поддерживающую вашу веб-страницу.

Строительная фотография / Avalon / Getty Images

Начало работы

Лучший способ добавить фоновое изображение в таблицу — использовать свойство CSS background .Чтобы подготовиться к эффективному написанию CSS и избежать неожиданных сбоев при отображении, откройте фоновое изображение и запишите его высоту и ширину. Затем загрузите свое изображение к своему хостинг-провайдеру. Проверьте URL-адрес изображения; Одна из наиболее распространенных причин, по которой изображения не отображаются, — это опечатка в URL-адресе.

Вставьте блок стиля CSS в заголовок документа:

class = «ql-syntax»>

Напишите свой CSS для фона на вашей таблице и поместите его в блок стилей:

Поместите свою таблицу в HTML:

ячейка 1 ячейка 2
ячейка 1 ячейка 2

Установите ширину и высоту таблицы в соответствии с шириной и высотой изображения.

Установите ширину и высоту таблицы в соответствии с шириной и высотой изображения.

Если содержимое вашей таблицы больше, чем высота и ширина изображения, фоновое изображение будет отображаться только один раз.

Поместите фон на одном столе

Приведенные выше инструкции установят одно и то же фоновое изображение для каждой таблицы на странице. Чтобы поместить фон только в определенные таблицы, используйте атрибут class . Добавьте фон класса в любую таблицу, для которой требуется это фоновое изображение.Установите ширину и высоту для этих таблиц.

Пусть фоновое изображение стола повторяется

Для больших таблиц или таблиц с большим количеством содержимого может потребоваться повторение фона, чтобы вся таблица была заполнена. Измените значение в вашем CSS так, чтобы изображение повторялось по оси Y, по оси X или мозаично по обеим сторонам.

фон: url («URL-адрес изображения») повторяется; 
 

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

повторить-x 
 

или

повторять 
 

для плитки по горизонтали или вертикали соответственно.

Цвета фона ячейки Блокировать фоновое изображение таблицы

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

Соображения

Любое изображение, которое вы используете, должно иметь соответствующую лицензию; просто потому, что вы можете найти фотографию в Интернете, не означает, что вы можете использовать ее для собственного использования. Уважайте авторские права!

Фоны таблиц отделяют ваши таблицы от основной страницы.Однако дважды подумайте, прежде чем использовать эту технику. Добавление нейтрального изображения может не отвлекать, но сложные изображения, предназначенные для того, чтобы быть милыми (например, вставка изображения котенка за столом, указывающего на усыновление домашних животных), могут показаться непрофессиональными и могут повлиять на читаемость табличных данных.

Использование фоновых изображений CSS · Документы WebPlatform

Сводка

В этой статье подробно рассматриваются фоны CSS: цвет фона, изображение, повторение, вложение и положение.Ближе к концу он также рассматривает передовые методы, такие как спрайты CSS.

Введение

Признайся! С момента появления первой статьи в учебной программе по веб-стандартам вы были взволнованы, узнав, как сделать свой сайт ярким и потрясающим. Может быть, вы даже перешли к этому разделу?

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

Как вы ранее узнали из предыдущей статьи в этой серии, одно из наиболее важных изменений, которое приходит с CSS, — это возможность отделить представление , , или то, как все выглядит, от семантики , или того, что означают вещи.Фоновое изображение CSS — один из наиболее важных инструментов, имеющихся в вашем распоряжении, поскольку он позволяет применять декоративные изображения к определенным частям вашего HTML, не добавляя лишнего веса вашему HTML. Раньше авторы (как и вы!) Были вынуждены заполнять свой код тегами img для достижения того же эффекта.

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

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

Как это работает?

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

Во-первых, просмотрите различные свойства, которые вы можете использовать.

Свойства фона

Создание предупреждающего сообщения

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

Конструкция

Представьте, что графический дизайнер предоставил визуальный макет предупреждающего сообщения, которое вы хотите создать для своего веб-сайта. Предупреждение имеет светло-оранжевый цвет фона, чтобы выделяться на фоне окружающих абзацев.Он также имеет значок предупреждения в десяти пикселях от верхнего левого угла.

Обратите внимание, что в макете есть одна строка текста, но в будущем она может содержать больше. Один из самых важных навыков веб-разработчика — предвидеть, как будет развиваться дизайн. Часть уважения к художественному видению сайта — это постоянство от запуска до редизайна. Таким образом, предупреждающее сообщение может содержать более одной строки текста или даже несколько абзацев, списков или других элементов HTML. Стремитесь быть как можно более элементарным агностиком.Это увеличит вероятность повторного использования кода и позволит вам сделать сайт максимально быстрым и эффективным. Макет выглядит, как на Рисунке 1.

Рис. 1. Макет окна предупреждения, сделанный графическим дизайнером.

Разработчик также предоставил значок, который мы должны использовать, как показано на рисунке 2.

Рисунок 2: Значок предупреждения.

Код

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

После создания окна предупреждений следуйте пошаговым инструкциям, приведенным ниже. Каждый снимок экрана содержит ссылки на примеры кода, поэтому вы можете проверять исходный файл на каждом этапе. Поэкспериментируйте с кодом, увеличивая или уменьшая значения, и попробуйте альтернативы. Вы также можете продолжить, написав каждую новую строку кода в таком инструменте, как Opera Dragonfly или Firefox Firebug, чтобы вы могли сразу увидеть результаты каждого шага.

Создание ловушки или селектора CSS.

Сначала вам нужно создать предупреждение класса , которое позволит вам подключить код CSS. Создайте новые файлы скелетов CSS и HTML, свяжите таблицу стилей CSS с файлом HTML и добавьте в каждый из них следующий код:

Скопируйте следующий CSS и вставьте его в таблицу стилей:

  .alert {...}
  

Скопируйте следующий HTML-код и вставьте его в HTML-документ:

  

   Внимание!  Здесь находится текст нашего предупреждающего сообщения.
  

Приведенный выше код задает для предупреждения стиль class , а не id , потому что это дает возможность для более одного предупреждения на странице. Например, вы можете добавить предупреждения к элементу формы с несколькими потенциальными ошибками. Цель состоит в том, чтобы сделать ваш CSS как можно более гибким и ограничить элементы в соответствии с дизайном при создании содержимого HTML.

На данный момент у вас есть прочная основа, но предупреждение по-прежнему выглядит как обычный абзац, потому что вы еще не добавили никаких стилей.Далее вы добавите несколько правил для его стилизации.

Примечание. Я намеренно выбрал , а не , чтобы ограничить предупреждение класса параграфами; окна предупреждений могут легко содержать и другие элементы. Вы должны оставить как можно больше гибкости в своем CSS.

Добавление цвета фона

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

Как показано ниже, вы можете добавить светло-оранжевый цвет фона к окну предупреждения, чтобы выделить его среди текста вокруг него. Важно не делать цвет фона слишком темным, потому что вам нужно поддерживать разумный уровень контраста между текстом и цветом фона. Добавьте в правило CSS следующее свойство:

  .alert {
  цвет фона: #FFFFCC;
}
  

Окно предупреждения теперь выглядит так, как показано на рисунке 3.

Рисунок 3: Окно предупреждения с добавленным цветом фона.

Применение фонового изображения

Затем вы можете добавить фоновое изображение к предупреждению. Путь к фоновому изображению должен быть заключен в url () , как показано в приведенном ниже коде. Добавьте выделенную строку в правило CSS:

  .alert {
  цвет фона: #FFFFCC;

  
  фоновое изображение: URL (alert.png);
}
  

Окно предупреждения теперь выглядит, как на Рисунке 4.

Рисунок 4: Фоновое изображение было добавлено, но мозаика выглядит неправильно.

Помните, что каждое свойство фона имеет значение по умолчанию - если вы не указали значение, будет применено значение по умолчанию. Обратите внимание, что изображение покрывает все оповещение мозаикой, как мозаика на полу кухни. Какой вывод? По умолчанию фоновые изображения повторяются как по горизонтали, так и по вертикали. Повторяющийся фон особенно полезен для градиентов и узоров, заполняющих экран или конкретный элемент HTML, но в данном случае этот эффект , а не желателен.

Контроль повтора фона

Рис. 5. Как и фоновое изображение, эти плитки повторяются как по горизонтали, так и по вертикали.

Чтение спецификаций, безусловно, может быть пугающим, но спецификация - действительно хорошее место, чтобы выяснить, как должен работать CSS , прежде чем углубляться в бесчисленное множество различий между браузерами. Прочтите часть спецификации W3C, посвященную цветам и фону, и попытайтесь найти ключевое слово, которое будет использоваться, когда вы не хотите, чтобы фоновое изображение повторялось.Эта стратегия используется в примере ниже:

Обратите внимание, что есть раздел для каждого свойства фона, включая повторение фона. При значении Значение отображаются все возможные варианты, включая: repeat , repeat-x , repeat-y , без повтора и наследуют . По умолчанию ( начальных ) фоновые изображения настроены на повтор. Направление не указано, это означает, что изображение будет мозаичным как по горизонтали, так и по вертикали.Вы, вероятно, догадались, что no-repeat - это значение, которое нужно установить для предотвращения мозаичного изображения в любом направлении. Добавьте следующую выделенную строку ниже в правило CSS:

  .alert {
  цвет фона: #FFFFCC;
  фоновое изображение: URL (alert.png);

  
  фон-повтор: без повторения;
}
  

Окно предупреждения теперь выглядит, как на Рисунке 6.

Рисунок 6: Окно предупреждения с единственной копией фонового изображения (без мозаики).

Кроме того, вы можете выбрать повторение в обоих направлениях (например, кухонная плитка) или в любом направлении. Градиенты часто повторяются по горизонтали или вертикали (см. Рисунок 7). Вам не нужно знать размер HTML-элемента; вы просто вырезаете часть своего градиента и настраиваете его повторение в желаемом направлении; либо x для горизонтали, либо y для вертикали. Узоры часто повторяются в обоих направлениях, а значки обычно не повторяются. Вы изучите background-repeat далее в следующем примере.

Рис. 7. Зеленовато-желтые плитки в этом примере повторяются только по горизонтали.

Затем взгляните на практический пример с моего веб-сайта. Рисунок 8.

.

Рисунок 8: Повторяющийся пример с моего веб-сайта.

CSS, который я использовал для добавления этого декоративного эффекта, относительно прост. Я сделал фон повторяющимся по горизонтали, используя repeat-x :

  кузов {
    
    фон-повтор: повтор-х;
  }
  

Приложение

Атрибут вложения позволяет указать, как будет вести себя фон, когда пользователь прокручивает страницу вниз.Поведение по умолчанию - scroll , что заставляет фоновое изображение прокручиваться вместе с содержимым.

С другой стороны, установка background-attachment на fixed приводит к тому, что элемент застревает в окне браузера, поэтому он остается на том же месте при прокрутке содержимого внутри элемента, к которому он прикреплен. Это создает некоторые странные эффекты, которые будут очевидны только при прокрутке прикрепленного HTML-элемента. W3C использует его для обозначения статуса своих спецификаций.Например, изображение «Рекомендация кандидата W3C» вверху слева. Прокрутите страницу вниз и обратите внимание, что изображение остается вверху слева. Он прикреплен к элементу body , поэтому всегда виден.

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

  .alert {
  цвет фона: #FFFFCC;
  background-image: url (alert.png);
  фон-повтор: без повторения;

  
  вложение фона: прокрутка;
}
  

Как показано на рисунке 9, визуальное отображение окна предупреждения не сильно отличается от того, что было раньше.

Рисунок 9: Дисплей не изменился.

Размещение изображения

Позиционирование - это точная настройка, которая позволяет размещать фоновые изображения именно там, где нужно, как по горизонтали, так и по вертикали, внутри элемента HTML. Это свойство принимает ключевые слова и числовые значения, такие как верхний , центр , правый , 100% , -10% , 50px и -30em .

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

Рисунок 10: Различные примеры положения фона с использованием ключевых слов, процентов и пикселей.

Приведенный ниже код позиционирует фоновое изображение. Цель состоит в том, чтобы расположить его в верхнем левом углу, но не касаться сторон, поэтому вам нужно сместить его на 10 пикселей как сверху, так и слева. Это достигается путем добавления следующей выделенной строки в правило CSS:

 .тревога{
  цвет фона: #FFFFCC;
  фоновое изображение: URL (alert.png);
  фон-повтор: без повторения;
  вложение фона: прокрутка;

  
  background-position: 10px 10px;
}
  

Первое значение - это смещение по горизонтали, второе - по вертикали. В этом случае значения такие же. После внесения этих изменений ваше окно предупреждения должно выглядеть, как на Рисунке 11.

Рисунок 11: Использование CSS-позиционирования для установки местоположения фонового изображения.

Совет. Выберите ключевые слова или числовые значения, но не объединяйте их.Старые браузеры могут игнорировать ваше объявление, если вы используете оба сразу. При использовании справа и снизу достигается тот же эффект, что и при использовании 100% по горизонтали или вертикали, соответственно.

Использование сокращений, чтобы собрать все вместе, как профессионал

Как вы узнали, определенные свойства CSS можно сгруппировать. Фон и все его подсвойства можно сгруппировать в правилах CSS. Код CSS, описанный до сих пор, можно переписать в сокращенной форме следующим образом:

 .тревога{
    
    фон: #FFFFCC url (alert.png) прокрутка без повтора 10px 10px;
  }
  

Совет. При группировании подсвойств фона всегда располагайте свойства в следующем порядке. Это важно как для кроссбраузерной совместимости, так и для организации и обслуживания таблиц стилей:

1. цвет
2. изображение
3. повтор
4. насадка
5. горизонтально позиция
6. вертикально положение

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

Рисунок 12: Сокращение работает как шарм!

Экспериментируя с кодом

Лучший способ запомнить все нюансы CSS - это проверить параметры самостоятельно. Попробуйте изменить некоторые свойства в примере и посмотрите, как разные значения влияют на отображение. Установите background-position на 100% 100% и обратите внимание, что это дает тот же результат, что и использование ключевых слов right и bottom .А если вы измените его на -5px 0 ? Как вы думаете, почему часть изображения скрыта?

Проверка качества

Тестирование чрезвычайно важно для обеспечения хорошего взаимодействия с пользователем. Тот факт, что сайт хорошо выглядит на вашем компьютере с вашей конкретной конфигурацией, не означает, что он будет хорошо выглядеть в каждом браузере. При тестировании окна предупреждений выполните следующие основные минимальные шаги:

• Увеличьте или уменьшите количество текста внутри предупреждения.
• Увеличьте размер текста в браузере как минимум на два уровня.Определите, лучше ли использовать em для позиционирования нашего изображения. Проверьте, что происходит, когда вы увеличиваете размер текста.
• Примените предупреждение class к другим элементам, таким как div , p , ul , strong или em . Как можно изменить код, чтобы сделать класс независимым?
• Включите несколько абзацев и список в предупреждение div . Код все еще работает?
• Визуально проверьте предупреждение в браузерах 1-го уровня (также известных как обозреватели уровня А.).Мой совет - написать код для хороших браузеров, а затем адаптировать его для Internet Explorer - когда код заработает.

Строгое тестирование - это часть обучения написанию CSS. Чем внимательнее вы будете учиться, тем быстрее сможете писать код.

Спрайты

Пользователи хотят все. Они хотят, чтобы ваш сайт был гламурным, интерактивным и быстрым. Однако включение большого количества фоновых изображений CSS может значительно замедлить работу вашего сайта. Чем больше HTTP-запросов вы сделаете, тем медленнее будет работать ваш сайт (HTTP-запрос возникает всякий раз, когда ваш компьютер обращается к веб-сайту, и ему необходимо попросить сервер отправить ему другой ресурс в дизайне сайта, такой как файл CSS или изображение ... каждый дополнительный запрос означает более длительное время загрузки сайта).

Чтобы обойти это ограничение, вы можете объединить связанные значки в одно изображение, известное как CSS-спрайты. Свойство background-position позволяет вам затем разместить изображение в соответствующих позициях, чтобы значки отображались в окне элемента HTML, к которому прикреплены спрайты CSS.

Обратите внимание, что на рисунке 13 для отображения значка Земли в окне HTML вы можете разместить изображение, используя слева вверху . Чтобы переместить изображение таким образом, чтобы отображался значок предупреждения, необходимо изменить положение фона на -80 пикселей 0 .Отрицательное значение по горизонтали смещает изображение влево.

Рисунок 13: Использование CSS-спрайтов для уменьшения количества HTTP-запросов.

Примечание. Если вы установите отрицательное положение фона, Safari будет повторять ваше изображение, даже если вы указали без повтора . Это необходимо учитывать, когда вы начинаете работать с фоновыми изображениями для создания более сложных макетов.

Пример сложного спрайта и фонового изображения

Затем посмотрите, как можно использовать спрайты CSS.Предположим, дружелюбный дизайнер прислал нам новый макет. Это иллюстрирует список ссылок на целевой странице блога. Он указывает на профиль блоггеров в LinkedIn, RSS-канал, фотографии Flickr и закладки. При оценке каждой ссылки обратите внимание на градиент, начинающийся в центре с белого цвета и переходящий к серому вверху и внизу ссылки. И чтобы еще больше усложнить ситуацию, дизайнер спросил, можем ли мы сделать каждую ссылку простой белой без кривой, когда посетители наводят курсор на ссылку, как показано на рисунке 14.

Рисунок 14: Макет нового дизайна.

Логотипы могут быть включены с использованием элементов img в разметке. Однако использование CSS-спрайтов - гораздо лучшее решение. Спрайты загружаются быстрее, потому что должно загружаться только одно изображение (а не четыре), и это очищает ваш HTML, уменьшая количество необходимой разметки.

Создание спрайта

Первый шаг включает вырезание четырех логотипов и создание набора спрайтов, как показано на рисунке 15.

Рисунок 15: Набор спрайтов.

Также необходимо вырезать часть градиента шириной 1 пиксель. Для наглядности я вырезал немного больший фрагмент, но в реальном проекте сайта вам понадобится только изображение в один пиксель (см. Рисунок 16).

Рисунок 16: Срез, используемый для градиентного фона.

HTML-код, который создает список, представляет собой неупорядоченный список, содержащий ссылки. Обратите внимание на пустые элементы , охватывающие элементов внутри ссылок. Очень важно не иметь фиксированной высоты и ширины для элементов, содержащих текст.В конце концов, вы не представляете, насколько большим будет текст. Что будет, если сайт переведут на немецкий язык? Вы можете использовать эти дополнительные промежутки для отображения логотипов. В качестве альтернативы вы можете решить, что не хотите, чтобы посторонняя несемантическая разметка загромождала ваш HTML. В этом случае вам нужно будет использовать спрайт большего размера и оставить пробел между значками. Имейте в виду, что эта стратегия медленнее для пользователей с медленным подключением, особенно для тех, кто использует мобильные телефоны для просмотра сайта. Код для списка показан ниже.Скопируйте его, а затем вставьте в документ HTML:

  

    

       Резюме 
    
    

       RSS-канал 
    
    

       Фотографии 
    
    

       Ссылки 
    
  
  

Добавьте следующий CSS-код в новый CSS-файл и свяжите его с HTML-документом:

 .навигация, .navigation li {
  маржа: 0;
  отступ: 0;
}

.navigation li {
  border-top: сплошной белый 1px;
  тип-стиль-список: нет;
}

.navigation li a {
  фон: # E2E2E2 url (sprite_gradient_bkg.jpg) repeat-x левый центр;
  отступ: 20 пикселей;
  дисплей: блок;
  семейство шрифтов: Arial, Helvetica, sans-serif;
  цвет: # 333;
  размер шрифта: 18 пикселей;
  текстовое оформление: нет;
}



.navigation li a: hover, .navigation li a: focus {
  фон: прозрачный - нет;
}
  

CSS использует оба фоновых изображения.Во-первых, взгляните на фоновое изображение градиента. Следует отметить три интересных момента:

1. Изображение повторяется по горизонтали ( repeat-x ). Эта мозаика позволяет растянуть такое маленькое изображение по всему списку.
2. Изображение центрируется по вертикали. Вы хотите, чтобы круглый фрагмент изображения отображался в середине элемента списка, поэтому вам следует использовать позицию фона слева по центру .
3. В CSS я применил цвет фона такого же серого, что и серый на градиентном изображении.Это гарантирует, что если элемент вырастет, он не будет выглядеть сломанным. Для получения дополнительной информации об этой технике я рекомендую прочитать Bulletproof Web Design Дэна Седерхольма.

Последняя строка означает, что элемент не должен отображать цвет фона или изображение, когда посетитель наводит на него курсор или фокусируется на элементе с помощью клавиатуры. Вам может быть интересно, почему я применил свойства фона к ссылке, а не к элементу списка. Ответ заключается в том, что Internet Explorer 6 и более ранние версии не поддерживают псевдоклассы, такие как hover , для элементов, отличных от ссылок.Я внес изменения в код, чтобы учесть это ограничение.

Затем вы можете создать CSS для маленьких логотипов. Как обычно, вы можете начать с определения наиболее общего случая для всех элементов span в вашем навигационном модуле. Именно здесь вы определяете изображение, которое будет использоваться для всех промежутков, настройку повтора и положение фона (каждое из них отличается, поэтому вы можете использовать первое). Вы можете использовать сокращенное обозначение этого правила. Обратите внимание, что комментарии CSS делят разделы нашего кода на управляемые фрагменты.Добавьте следующий код в конец файла CSS:

 

.navigation span {
  фон: url (sprite_logo.gif) без повтора слева вверху;
  высота: 15 пикселей;
  ширина: 15 пикселей;
  поле справа: 20 пикселей;
  дисплей: -moz-inline-box;
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}
  

После завершения базового форматирования теперь вы можете определить исключения, или , что отличает от каждого конкретного логотипа. В этом случае изменяется только CSS background-position .Для каждого соответствующего элемента списка необходимо, чтобы изображение было перемещено на 15 пикселей влево, потому что каждое из изображений логотипа имеет ширину 15 пикселей. Добавьте в конец файла CSS следующее:

 

#rss span {
  background-position: -15px 0;
}

#photos span {
  background-position: -30px 0;
}

#links span {
  background-position: -45px 0;
}
  

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

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

Использование

  10.02.2014 около 1500 центральное время:
  

hoffmant99 внес незначительные изменения, чтобы пример спрайта работал, хотя учащийся (читатель этой страницы) должен знать, что имена файлов не совпадают.Это можно исправить локально, изменив имя с «sprite_logo» на «sprite_l» и «sprite_gradient_bkg.jpg» на sprite_g.jpg ».

См. Также

Внешние ресурсы

Изображение предоставлено

Вопросы к упражнению

• Размер абзаца составляет 40 на 180 пикселей, а размер фонового изображения - 60 на 200 пикселей. Вы увидите изображение целиком или только его часть? Почему?

• Вы хотите, чтобы изображение располагалось в нижнем левом углу элемента blockquote - введите правильные значения.

    blockquote {background: yellow url (quote.png) no-repeat scroll ____ ____;}
    

• Допустим, вы хотите, чтобы к каждому h3 в вашем документе с классом «вопрос» применялся градиентный узор. Вы бы использовали repeat-x , repeat-y , no-repeat или repeat для достижения чего-то похожего на пример ниже? Почему?

• Каким будет фоновое положение примера в вопросе номер 3? Как можно творчески использовать цвет фона, чтобы он мог расширяться до любой высоты? Почему это важно?
• Какое сокращение можно использовать для удаления всех свойств фона?
• Какова цель CSS-спрайтов?

HTML-урок 4: Как вставить изображение в HTML

Как вы помните из Урока 1 (Что такое HTML?), Добавить абзац в HTML так же просто, как заключить текст в теги

и

.Однако добавить изображение немного сложнее.

Следуй за

Прежде чем мы продолжим, я призываю вас скопировать и вставить сегодняшний код в свой собственный HTML-документ (или страницу, которую мы создали в Уроке 2: Как создать и сохранить свой первый HTML-файл вручную). Это позволит вам редактировать текст и обновлять файл в вашем веб-браузере по мере внесения нами изменений. Это значительно улучшит ваши способности к обучению.

Веселая собака

Давайте представим, что у нас есть изображение собаки на нашем компьютере, сохраненное как «веселая собака.jpg », и мы хотим вставить его на веб-страницу; это код, который мы будем использовать:

Давайте проанализируем этот код. Во-первых, - это код для создания элемента изображения. Затем буквы «src» используются в качестве атрибута (о котором вы узнали в Уроке 3: Атрибуты и значения) и обозначают «источник». По сути, нам нужно предоставить веб-браузеру значение , значение для источника изображения. Естественно, значение для атрибута источника - это «забавная собака.jpg ». В этом примере предполагается, что ваш файл изображения находится в том же каталоге, что и ваш HTML-файл. Если, например, у вас есть файл изображения в папке с именем «images», ваш код будет выглядеть так:

Самозакрывающиеся элементы

Как вы можете видеть, до сих пор в обоих примерах кода было , а не было конечным тегом , потому что код изображения является «самозакрывающимся» элементом. Это потому, что, в отличие от абзаца, у нас не будет большого количества контента внутри нашего элемента , а будет только одно изображение.Фактически, HTML5 не требует, чтобы мы когда-либо «закрывали» наши элементы, но по организационным причинам я рекомендую включать традиционные закрывающие теги для большинства элементов.

Есть еще один бит кода, который мы должны добавить, прежде чем мы закончим. Мы должны присвоить нашему изображению атрибут «alt» и значение. Атрибут alt означает «альтернатива» и используется для предоставления текстовой альтернативы для зрителей, если изображение не загружается или если они имеют слабое зрение. Вот как будет выглядеть наш код:

Вот и все!

Если вы предпочитаете смотреть видеоуроки, а не читать письменные уроки, ознакомьтесь с моим 8-часовым видеокурсом и изучите профессиональный HTML, CSS и адаптивный дизайн.

Как вставить фоновое изображение в Word

Как вставить фоновое изображение из MyCuteGraphics в MS Word.

* Важное примечание: все фоны выполнены в виде «плиток», которые бывают разных размеров.Каждый из них разработан таким образом, чтобы вы могли создать бесшовный узор в документе, холсте, фигурах или тексте.

Сначала вам нужно сохранить фоновое изображение с MyCuteGraphics.com на свой компьютер. Обязательно посетите фоновую страницу и сохраните изображение с самой фоновой страницы. Если вы сохраняете изображение со страницы «категории фона», вы можете сохранить эскиз, а не все изображение. Важно знать, что большинство фонов на MyCuteGraphics.com были спроектированы как бесшовные модели, чтобы вы могли использовать их для создания больших фоновых изображений или границ, или чтобы вы
может заливать заливкой документ или холст, чтобы в дизайне не было разрывов, как мы собираемся сделать в этом уроке.В этом уроке я собираюсь использовать милый радужный фон из категории «Симпатичные фоны». На ПК щелкните правой кнопкой мыши и сохраните изображение. На Mac вы можете использовать «управление, щелкните правой кнопкой мыши».
Вы можете сохранить фон в желаемое место на вашем компьютере. Для удобства я сохраню изображение на свой рабочий стол.

Открыв Word и созданный новый документ, щелкните вкладку «Макет страницы» вверху:

Затем нажмите «Цвет страницы», затем «Эффекты заливки»:

Откроется окно, в котором вы выберете вкладку «Текстура»:

Теперь, когда выбрана вкладка «Текстура», нажмите «Другая текстура»:

Найдите фоновое изображение из того места, где оно было сохранено на вашем компьютере - для этого урока я сохранил изображение на рабочий стол и импортирую его оттуда.Как только вы найдете изображение, дважды щелкните по нему:

Изображение появится под списком текстур, а также в окне образца. Поскольку фоновая плитка представляет собой бесшовный узор, который повторяет образец окна, не будет отображать фон на странице полностью - нажмите Ok:

Теперь у вас должен быть документ, заполненный фоном:

Надеюсь, это короткое руководство будет вам полезно. Если у вас есть какие-либо вопросы или есть другие руководства, которые вы хотели бы увидеть, пожалуйста, свяжитесь со мной через контактную форму, которую можно найти ЗДЕСЬ.

Как вставить изображение в текстовый блок - Klaviyo

Обзор

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

1. Редактирование области Source текстового блока
2. Вставка URL изображения в текстовый блок

Для обоих вариантов сначала необходимо загрузить изображение на Klaviyo или на сайт хостинга изображений.

Разместите свое изображение

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

Klaviyo автоматически размещает все изображения, которые вы загружаете в свою библиотеку изображений. Чтобы получить URL-адрес изображения, которое вы загрузили в Klaviyo, или загрузить новое изображение в Klaviyo, перейдите на вкладку Brand Library . Оказавшись здесь, щелкните изображение, которое хотите вставить в текстовый блок.

Возьмите URL-адрес из строки поиска в верхней части браузера.

В качестве альтернативы вы можете разместить свое изображение на платформе для размещения изображений, например, в одном из следующих вариантов:

Если вы когда-нибудь захотите удалить изображение из вашей библиотеки брендов Klaviyo, прокрутите вниз до изображения, которое вы хотите удалить, выберите трехточечное меню справа от этого изображения и нажмите Удалить .

Вставить URL изображения в текстовый блок

Кроме того, вы можете загрузить размещенное изображение, щелкнув значок изображения и вставив URL-адрес изображения в появившееся диалоговое окно.Это работает независимо от того, где вы размещаете изображение.

В этом диалоговом окне вы сможете редактировать размеры и выравнивание изображения.

Редактировать исходную область текстового блока

Скопируйте приведенный ниже код и заполните заполнители своими значениями:

Затем вставьте его в область Source текстового блока в редакторе шаблонов.

Снова щелкните Источник , а затем Сохранить изменения. Ваш текстовый блок будет содержать изображение, которое также появится в вашем шаблоне. Если ваше изображение очень большое, как в примере, который мы использовали, вам, возможно, придется прокрутить вправо в текстовом блоке, чтобы увидеть все изображение.

После того, как вы добавили изображение в текстовый блок, вы можете настроить его с помощью HTML. Например, вы можете захотеть центрировать изображение с помощью тега

. Для этого просто заключите HTML-код изображения в центральный тег, например:

Если вы используете Klaviyo для размещения своего изображения, просто вставьте тег img src вокруг URL-адреса изображения, например: .

Дополнительные ресурсы

Хотите узнать больше о персонализации электронной почты с указанием сведений о клиентах? Ознакомьтесь с нашей статьей о тегах шаблонов и синтаксисе переменных.

базовых изображений | вставка изображения на HTML-страницу, выравнивание графики

Путь // www.yourhtmlsource.com → Мой первый сайт → ОСНОВНЫЕ ИЗОБРАЖЕНИЯ

---

Итак, у вас есть кое-что написанное и пара страниц, на которые есть ссылки. Теперь ваш сайт выглядит намного убедительнее.Но там все еще чего-то не хватает, не так ли? Вы, вероятно, не можете ничего поделать, но хотите заполнить свои страницы изображениями. Прелесть в том, что это действительно просто. На самом деле, если вы до сих пор уделяли внимание, у вас не должно возникнуть никаких проблем. Давай займемся делом.

Навигация по страницам:
Вставка изображения
| Связывание изображений
| Основные атрибуты

Эта страница последний раз обновлялась 21.08.2012

---

Вставка изображения

Это основная вещь - просто размещение изображения на вашей странице.Код для встроенных изображений - img . Вы используете тот же тип атрибута, что и атрибут href из предыдущей статьи, поэтому его использование раньше поможет вам быстрее разобраться в этом вопросе.

Для простоты поместите изображение, которое вы хотите использовать, в тот же каталог, что и HTML-файл, в . Скажем, ваше изображение называется ’go.gif’, код для вставки этого изображения в ваш документ:

Очень важно

Изображение появится на вашей странице вот так.

1. src означает « S ou RC e», поэтому вы говорите, что источником изображения является go.gif . Убедитесь, что вы правильно указали тип файла изображения. Если вы добавляете ссылку на фотографию, скорее всего, это будет файл .jpg. Бит src - это обязательный в теге img , что означает, что вы должны его вставить. Совершенно очевидно, иначе там ничего не было бы.
2. alt означает « Alt ernate text». Этот атрибут следует использовать для описания изображения для людей, которые просматривают с отключенными изображениями, или для посетителей, которые не могут видеть ваши изображения. Атрибут alt также является обязательным, поэтому вы должны указать его для каждого используемого изображения.

Вы можете поместить URL-адрес любого изображения в Интернете в src , но на самом деле вы должны использовать только относительные адреса для размещения изображений на ваших страницах .Добавление внешних изображений означает, что читатель должен подключаться к нескольким серверам при загрузке вашей страницы, и это добавляет много дополнительного времени для загрузки вашей страницы. Ничего хорошего. Вы можете сохранять изображения с других веб-страниц в свой собственный каталог и использовать их оттуда, если хотите, при условии, что изображения бесплатны (вы всегда должны уточнять у владельца сайта).

После того, как вы ввели src для своего изображения и сохранили HTML-файл, вы можете открыть его в браузере и проверить, работает ли он.Если ваше изображение не появляется и вы получаете пустую рамку или прямоугольник с небольшим красным значком «x», значит проблема с указанным вами значением src . Убедитесь, что вы правильно установили адрес и что изображение находится там, где вы говорите.

Связывание изображений

Если вы хотите создать ссылку на другой файл, щелкнув изображение, чтобы перейти к нему, все, что вам нужно сделать, это использовать тот же тег из предыдущего урока и обернуть вокруг кода изображения, чтобы изображение было в место обычного текста.Итак, чтобы сделать go.gif ссылкой на fullindex.html , вы должны написать:

В результате получится:

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

border = "0" >

По умолчанию граница Толщина равна 2, поэтому вы можете установить ее на 1, если вы хотите более тонкую границу, или на что-то большее для большой плохой границы. Вы даже можете добавить границы к изображениям, которые не являются ссылками, которые будут цвета вашего текста .

Основные атрибуты

Так как вы уже знаете, как выровнять такие вещи, как абзацы, я могу также добавить выравнивающие изображения на эту страницу. img align ing выполняется примерно так же, за исключением того, что теперь у вас есть 3 новых значения, которые вы можете использовать (только для изображений, ума): верхний, средний и нижний . Они используются аналогичным образом в качестве атрибутов тега, например:


align = "left">


Вот несколько примеров

Выровнен слева . Обратите внимание, как текст обнимает изображение, а не начинается под ним.

Выровнено справа .Изображение перескакивает в сторону, и если текст достигает его, он просто падает рядом с ним и продолжается.

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

Выровнено по середине . Вы это уже поняли?

Выровнено по снизу , все ровно.

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

Как добавить фоновое изображение в электронную почту HTML - Stripo.email

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

Просто выбирая изображения и добавляя фоновые изображения в электронное письмо в формате HTML, вы задаете тон всему сообщению.

Все, что нам нужно сделать, чтобы создать эффективную рекламную кампанию по электронной почте , - это сделать этот тон веселым .

Посмотрите наше короткое видео, чтобы получить краткую информацию о типах фонов и о том, как их добавлять с помощью Stripo.

В Интернете можно найти массу информации о CTA, баннерах и шрифтах. Но о фоновых изображениях в сообщениях электронной почты вряд ли можно что-то найти. Какая потеря - фоновое изображение - хороший способ украсить отправляемые вами сообщения, чтобы они выглядели законченными и имели красивую форму.

Я искал в Интернете более подробную информацию о фоновых изображениях электронной почты в формате HTML, но все, что я нашел, это то, как добавить фон к электронной почте, например Gmail или Outlook, исходящие сообщения, и как внести изменения в коды HTML.

Разумный вопрос здесь в том, где мы можем найти надежные фоновые изображения для наших писем и как добавить их в наши шаблоны. Это очень индивидуально - при правильном выполнении любое изображение может стать для вас лучшим решением.

Почему тема статьи называется «Как добавить фоновое изображение в ваше электронное письмо в формате HTML»? Потому что с другими редакторами, чтобы вставить фон в полосу или применить его ко всему электронному письму, вам потребуются определенные навыки работы с кодами HTML.Но не с Stripo. Мы упростили этот процесс для вашего удобства - больше не нужно вносить никаких изменений в HTML-коды .

Что нужно знать перед добавлением фонового изображения в сообщение электронной почты HTML

Проверьте, видны ли ваши электронные письма

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

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

Здесь, в примере, мы видим, что фон в форме белой рамки не отображается в Outlook 2003, как в Outlook 2016 и почте Windows 10, но отображается в 2007 году.

Что делать, если изображение не отображается:

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

Примечание. Цвет фона электронной почты по умолчанию - белый.

Различные типы фоновых изображений

Фоновые изображения для полос

Только редкие конструкторы шаблонов позволяют установить фоновое изображение для отдельных блоков. Stripo.email - один из них.

Мне нравится этот пример за его простое, но со вкусом оформленное изображение.

Посмотрите, как легко добавить фоновое изображение в электронное письмо с помощью Stripo:

1. мы вставили блоки: дополнительное изображение, текст, также можно применить «кнопку» или таймер обратного отсчета поверх фона;
2. выбрал цвет фона для всей полосы;
3. применил «фоновое изображение» для блока.

Примечание: Центрируйте его с помощью кнопки «центр», включите опцию «повтор», если ширина или высота изображения слишком малы для заполнения всей полосы.

Поместите текст поверх изображения, при желании добавьте кнопку.

Важно: перед отправкой получателям фонового изображения по электронной почте настройте добавляемое изображение - отредактируйте его во встроенном редакторе фотографий.

Добавить распорки / разделители … Почему мы говорим здесь о распорках? Потому что для того, чтобы ваш дизайн электронной почты выглядел более упорядоченным, вы можете использовать их для разделения частей блоков и даже полос.Особенно подходит для использования, когда ваши фоновые изображения имеют похожие цвета.

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

Например, ReallyGoodEmails и Adidas расширяют свой заголовок таким образом. Этот уникальный дизайн выгодно отличает их от других.

Как это сделать с Stripo:

1. загрузить выбранное вами изображение / использовать любое изображение из нашего банка;
2. включите все параметры.

Цвет фона как альтернатива фоновому изображению

Зачем нужно устанавливать цвета в качестве фона для писем? Потому что некоторые почтовые клиенты, такие как Microsoft Outlook, могут вообще не отображать фоновые изображения. Обязательно выберите цвет фона как можно ближе к фоновому изображению.

Хорошая новость в том, что установить цвета в качестве фона довольно просто.

Здесь можно использовать всю свою богатую фантазию.
Например, компания Outline всегда размещает свои новости в сообщениях на цветном фоне.Кроме того, в качестве цветов шрифта применяется контраст, а не черный цвет текста.

Вы можете применять разные цвета к отдельным блокам или ко всем электронным письмам. Это тебе решать.

Корпорация Samsung размещает большую часть своих писем на черном фоне и применяет контрастную белую кнопку CTA. Выглядит очень стильно.

Фоновое изображение для всего письма

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

Чем отличается изображение баннера от фонового изображения электронной почты? Баннер - это то, что ваши клиенты видят в качестве основного изображения вашего электронного письма, обычно с текстом поверх него. А фоновое изображение - это то, что они видят только на настольных устройствах. На большинстве мобильных устройств изображение последнего типа отображаться не будет.

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

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

Вы можете разместить над ним баннер, фрагменты ваших продуктов, контактную информацию, фреймы, нижний колонтитул, заголовок и т. Д.

Как установить фоновое изображение в шаблоне письма с помощью Stripo.дизайнер электронной почты:

1. на панели инструментов выберите «Внешний вид»;
2. нажмите «Общие»;
3. включите опцию «Фоновое изображение»;
4. загрузите понравившееся изображение;
5. включает параметры «повтор» и «по центру».

Примечание: поскольку некоторые почтовые клиенты не отображают фоновое изображение, вы можете установить цвет фона по умолчанию.

Правила, которым необходимо следовать

При добавлении фоновых изображений в электронную рассылку новостей необходимо соблюдать простые правила:

• изображений, которые вы выберете, должны быть интересными и тематическими.Все детали в электронном письме должны вызывать чувства у клиентов;
• обратитесь за помощью к дизайнерам или фотографам или найдите сайт с широким диапазоном доступных изображений. Не нарушайте авторских прав;
• добавить только одно изображение в качестве фона ко всему электронному письму;
• выбирает только совпадающие, но контрастные цвета для текстовых шрифтов;
• включите опцию «отзывчивое изображение». Это поможет правильно отображать ваши изображения как на мобильных, так и на настольных устройствах.

Некоторое время назад, чтобы установить фоновое изображение в шаблоне электронной почты, нам нужно было обладать некоторыми знаниями о кодировании HTML. Теперь, с помощью конструктора Stripo.email, нам вообще не нужно вносить какие-либо изменения в код. Нам даже не нужно знать, что это значит?
Система упростила весь процесс и облегчила нашу работу.

Краткое содержание

• HTML больше не о кодировании, он о качестве ваших писем;
• Изображения, которые вы используете в своих электронных письмах, должны быть высокого качества;
• Изображения должны быть с бесшовной структурой.Вы можете найти много таких в Интернете;
• Вставьте разделители, чтобы разделить отдельные блоки в свои электронные письма;
• Установите цвета фона в качестве альтернативы для некоторых почтовых клиентов, таких как Microsoft Outlook, или найдите альтернативные решения в этом сообщении в блоге;
• Проверьте свой шаблон перед отправкой.

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

Добавить комментарий Отменить ответ

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

Комментарий *

Имя *

Email *

Сайт