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

html как вставить картинку на задний фон

На чтение 7 мин. Просмотров 30 Опубликовано 15.12.2019

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

Фон для сайта

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

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

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности 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 , переписав код одного из наших предыдущих примеров:

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

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

Как сделать картинку фоном в html, код, примеры, background, image.

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

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

1.Вставить код в саму страницу.

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

Как поставить картинку на задний фон страницы?

Пропишем в самой странице код заднего фона.

Опять же, для этого есть несколько вариантов решения:

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

• Покрывается 100% ширины и высоты страницы
• Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
• Сохраняются пропорции картинки (aspect ratio)
• Изображение центрировано на странице
• Фон не вызывает скроллов
• Решение максимально кроссбраузерное
• Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

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

Этот способ работает в:

• Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
• IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

Как поставить картинку на фон сайта html

Как сделать картинку фоном в html, код, примеры, background, image.

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

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

1.Вставить код в саму страницу.

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

Как поставить картинку на задний фон страницы?

Пропишем в самой странице код заднего фона.

Опять же, для этого есть несколько вариантов решения:

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

• Покрывается 100% ширины и высоты страницы
• Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
• Сохраняются пропорции картинки (aspect ratio)
• Изображение центрировано на странице
• Фон не вызывает скроллов
• Решение максимально кроссбраузерное
• Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

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

Этот способ работает в:

• Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
• IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

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

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

Выбор картинки

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

К сожалению, растянуть изображение в html на весь экран невозможно. Фото используется в натуральную величину. Если картинка маленькая, то она замостит всю площадь, как на скриншоте внизу. Чтобы растянуть картинку придется создать дополнительный css документ, без этого не получится.

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

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

Если вас интересуют бесплатные изображения и отсутствие юридических последствий за их использование, то я рекомендую поискать на сайте Pixabay.com .

Теперь давайте поработаем с кодом. Должен отметить сразу, что сейчас мы работаем с html, то есть меняем изображение не для всего сайта, а только одной конкретной страницы, для которой пишется код. Если вас интересуют изменения всего ресурса, то вам нужно создавать код с помощью css, но об этом чуть позже.

Итак, вы можете работать в блокноте, я предпочитаю NotePad++. В нем работать гораздо удобнее: код дописывают за тебя, теги подсвечиваются. Программа бесплатная, и весит около 3 Мб. Очень рекомендую, особенно если вы новичок.

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

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

Как добавить фоновое изображение в HTML-емейл — Stripo.email

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

Просто выбирая фото и добавляя фоновые изображения в HTML-емейл, вы задаете тон всего сообщения.

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

Посмотрите наше короткое видео с основной информацией о типах фона и о том, как добавить их в Stripo.

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

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

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

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

Что нужно знать, прежде чем добавлять фоновое изображение в ваш HTML-емейл

Проверьте отображение ваших емейлов

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

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

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

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

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

Примечание: фоновый цвет емейла по умолчанию белый.

Разновидности фоновых изображений

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

Очень немногие конструкторы шаблонов позволяют встраивать фоновые изображения в отдельные блоки. Stripo.email — один из них.

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

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

1. мы вставили блоки: дополнительное изображение, текст, можно также добавить “кнопку” или таймер обратного отсчета поверх фона;

2. выбрали цвет фона для всей полосы;

3. применили “фоновое изображение” для блока.

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

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

Это важно: добавленное изображение можно отредактировать в нашем встроенном фоторедакторе.

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

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

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

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

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

2. включите все опции.

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

Хорошая новость: установить соответствующий цвет в качестве фона намного проще. И он почти всегда корректно отображается в любых емейл-клиентах и на всех устройствах. Но будьте осторожны с Microsoft Outlook. Вам все равно нужно проверить отображение с помощью Litmus.

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

Например, компания Outline всегда помещает новости на цветной фон. Кроме того, применяются контрастные цвета шрифта, но не черный текст.

Применять ли разные цвета для отдельных блоков или всего емейла? Решать вам.

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

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

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

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

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

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

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

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

1. на панели инструментов выберите “Внешний вид”;

2. нажмите “Общие”;

3. включите опцию “Фоновое изображение”;

4. загрузите понравившееся изображение;

5. включите “Повтор” и “Центрировать”.

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

Правила, которые следует соблюдать

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

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

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

• добавляйте только одно изображение как фон для всего емейла;

• выбирайте только подходящие, но контрастные цвета шрифтов для текста;

• включайте опцию “Адаптивное изображение”. Это поможет корректно отображать изображения на мобильных и десктопных устройствах.

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

Система упростила весь процесс и облегчила нашу работу.

Краткие итоги

• теперь упоминание “HTML” связано скорее с качеством ваших емейлов, чем с использованием его для создания писем;

• изображения в емейлах следует использовать высокого качества;

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

• вставляйте разделители, чтобы отделить блоки вашего емейла;

• устанавливайте цвет фона, как альтернативу (fallback), если картинка на загрузится у получателя, например, в Microsoft Outlook;

• тестируйте сообщения перед отправкой.

Используйте наши адаптивные HTML-шаблоны, добавляйте фон и радуйте клиентов красивыми рассылками.

Желаю вам всего наилучшего и успешных рассылок!

Background-blend-mode • Про CSS

На этой неделе в Firefox 30 было включено по умолчанию свойство background-blend-mode. Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.

Внимание: все демо в посте — действующие примеры без фолбеков. Для просмотра лучше всего воспользоваться последними версиями Chrome, Opera или Firefox.

Что делает это новое свойство и какие возможности оно нам дает?

background-blend-mode управляет режимами наложения слоев фона, заданного в CSS.

Пример:

Наведите курсор на картинку, чтобы увидеть исходное изображение.

background-blend-mode аналогичен режимам наложения слоев в фотошопе, и список возможных значений свойства вам, скорее всего, покажется знакомым:

• normal
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

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

Возьмем, к примеру, картинку с котиком и зададим её фоном:

background: teal url(http://placekitten.com/250/200);

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

Теперь можно добавить режим наложения, например:

background: teal url(http://placekitten.com/250/200);
background-blend-mode: hard-light;

Результат:

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

Слоев фона может быть больше двух, и для каждого слоя можно отдельно задавать режим наложения:

background: teal url(http://placekitten.com/250/200);
background-blend-mode: hard-light, multiply, normal;

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

Как можно использовать background-blend-mode?

Предположим, есть сайт в определенной цветовой гамме, и в дизайне нужно разместить несколько картинок:

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

background-blend-mode: luminosity;

Результат:

Способ имеет свои преимущества:

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

А если потом изменится цветовая схема сайта — не нужно будет заново перекрашивать картинки под новую схему — всё произойдет само собой:

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

Ещё один способ покрасить картинку в дизайне — подложить полосатый градиент:

Приятный бонус background-blend-mode — плавная деградация: если браузер не поддерживает режимы наложения, посетитель увидит обычную картинку. Может быть, она будет не очень вписана в цветовую схему, но это лучше чем ничего.

Интересно, что в некоторых режимах результат различается в зависимости от того, наложена ли картинка на цвет или цвет поверх картинки (слева картинка поверх цвета, справа наоборот):

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

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

Уже есть первая галерея с примерами: bennettfeely.com/gradients/. Ниже на странице можно найти JS-фолбек и взвешивание одних и тех же градиентов, сделанных на CSS или в виде изображений различных форматов. CSS, конечно, выигрывает.

И даже если пока что не все браузеры позволяют использовать background-blend-mode, имеет смысл поинтересоваться какие из используемых вами изображений уже можно заменить CSS-паттернами, чтобы получить выигрыш в весе и производительности.

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

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

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

Ещё несколько градиентов:

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

background-blend-mode выглядит очень привлекательно, позволяя добавить немного магии фотошопа в привычный CSS.

Фоновые изображения: Фоновое изображение — Учебник по HTML

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

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

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

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

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

---

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

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

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

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

---

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

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

Добавить фоновое изображение в пользовательский шаблон HTML

Прочтите эту страницу в

английский Español Français Português Deutsch

Чтобы еще больше улучшить дизайн ваших маркетинговых кампаний, вы можете добавить фоновое изображение в собственный шаблон Code your own в Конструкторе шаблонов Mailchimp.

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

Из этой статьи вы узнаете, как добавить фоновое изображение в свой собственный шаблон HTML.

Перед тем как начать

Вот что нужно знать перед тем, как начать этот процесс.

• Фоновые изображения могут отображаться не во всех почтовых клиентах, поэтому убедитесь, что вы знаете, какие почтовые клиенты поддерживают фоновые изображения, ознакомившись с нашей статьей поддержки CSS для почтового клиента.
• Большие изображения могут привести к неправильному отображению кампаний в почтовых ящиках получателей. Для достижения наилучших результатов установите разрешение 920 x 1080 пикселей или меньше и сожмите изображение.
• Разместите свои изображения на общедоступном сервере или воспользуйтесь бесплатным сервисом, например Imgur или Flickr, и используйте абсолютный путь к файлу, который указывает непосредственно на расположение файла в коде. Имейте в виду, что если вы размещаете свои собственные изображения на частном сервере, получатели без доступа к серверу не смогут увидеть изображение.
• Mailchimp также может разместить ваши изображения для вас в Content Studio, если они меньше 10 МБ.
• Вы также можете добавить фоновое изображение в обычную кампанию. Чтобы узнать больше, ознакомьтесь с нашей статьей «Добавление фонового изображения в кампанию».

Добавьте фоновое изображение в свой собственный HTML-шаблон

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

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

1. 1. Щелкните значок Кампании .
      
2. Щелкните Шаблоны электронной почты .
   
3. Нажмите Создать шаблон .
4. Щелкните вкладку Code your own и выберите Paste in code .
   
5. В редакторе кода вставьте следующий код сразу после открывающего тега , чтобы добавить фоновое изображение-заполнитель и цвет.

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

6. Замените или отредактируйте оставшийся код кампании своим собственным HTML.

7. Когда вы закончите редактировать код, нажмите Сохранить .
8. Нажмите Сохранить и выйти .
9. В модальном всплывающем окне «Сохранить шаблон » назовите свой шаблон.
10. Нажмите Сохранить.

Вы можете получить доступ к своему новому шаблону в конструкторе кампании или на странице «Шаблоны».

Тестирование и устранение неисправностей

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

Предварительный просмотр и тестирование вашей кампании по электронной почте
Тестирование с предварительным просмотром папки «Входящие»

Вот еще несколько советов по работе с фоновыми изображениями.

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

• При редактировании CSS убедитесь, что у вас нет других свойств фона в вашем коде, потому что они могут переопределить фоновое изображение.

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

Как добавить фоновое изображение к сообщению в Outlook

Что нужно знать

• В Outlook для Windows откройте новое окно электронной почты и перейдите к Параметры > Цвет страницы > Эффекты заливки > Изображение > Выберите изображение > Вставить > OK .
• В Outlook для Mac щелкните текст сообщения электронной почты и перейдите к Параметры > Фоновое изображение > выберите изображение> Откройте .

В этой статье объясняется, как добавить фоновое изображение к электронному письму в Outlook для Microsoft 365, Outlook 2019, Outlook 2016, Outlook 2013 и Outlook 2010.

Lifewire / Дерек Абелла

Как добавить фоновое изображение к сообщению в Outlook

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

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

1. Откройте настольное приложение Microsoft Outlook.

2. Перейдите на вкладку Home и выберите New Email . Или нажмите Ctrl + N .

3. В окне нового сообщения поместите курсор в текст сообщения.

4. Перейдите на вкладку Options .

5. В группе Темы щелкните стрелку раскрывающегося списка Цвет страницы .

6. Выберите Эффекты заливки .

7. В диалоговом окне Fill Effects перейдите на вкладку Picture .

8. Выберите Выберите изображение .

9. Выберите, где найти изображение, которое будет использоваться в качестве фона для сообщения Outlook:

   • Выберите из файла , чтобы вставить изображение с вашего компьютера.
   • Выберите Bing Image Search и введите слово или фразу, чтобы найти изображение в Интернете.
   • Выберите OneDrive , чтобы вставить изображение из своей учетной записи OneDrive.

10. Выберите изображение, затем выберите Вставить .

11. В диалоговом окне Fill Effects выберите OK .

Один из способов избежать необходимости воссоздавать это сообщение каждый раз, когда вы хотите его отправить, — это создать шаблон Outlook, который вы можете использовать в качестве отправной точки каждый раз, когда вы хотите отправить электронное письмо с изображением в фоновом режиме.

Если вам не нравится фоновое изображение, удалите его из нового сообщения. Перейдите на вкладку Options , выберите стрелку раскрывающегося списка Page Color и выберите No Color .Или запретите прокрутку фонового изображения.

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

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

1. Щелкните в теле письма.

2. Выберите Параметры > Фоновое изображение .

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

Спасибо, что сообщили нам!

Расскажите, почему!

Другой Недостаточно подробностей Сложно понять

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

Сводка

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

Введение

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

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

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

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

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

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

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

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

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

цвет фона	Устанавливает цвет фона элемента HTML.	Есть несколько способов указать background-color , включая значения RGB и ключевые слова.Большинство людей используют шестнадцатеричное представление, символ решетки (#), за которым следуют шесть символов. Первая пара указывает уровни красного, а вторая и третья указывают уровни зеленого и синего соответственно — #RRGGBB . Многие инструменты выбора цвета помогут вам найти шестнадцатеричное представление данного цвета. Чистый красный цвет, например, будет # FF0000. Допустимые значения включают значение , цвет, , , прозрачный, или , наследуемый .
изображение	Указывает путь или URL фонового изображения.	Установите фоновое изображение , указав браузеру, где найти изображение, используя URL-адрес. Например; URL (alert.png) . Обратите внимание, что путь предваряется ключевым словом url и заключен в круглые скобки. Этот синтаксис важен для понимания браузером того, что вы хотите указать местоположение. Если ваш URL-адрес содержит специальные символы или пробелы, вам, возможно, придется использовать апострофы или кавычки вокруг URL-адреса внутри круглых скобок. Допустимые значения: URL , нет или наследовать .
повтор	Указывает, в каком направлении должно быть выложено фоновое изображение.	Изображения могут быть размещены мозаикой по вертикали, горизонтали или по обоим направлениям, чтобы заполнить всю ширину или высоту элемента HTML. Используйте background-repeat , чтобы указать браузеру повторять фоновое изображение. Допустимые значения включают повтор , повтор-x , повтор-y и без повторения .
насадка	Задает поведение фонового изображения при прокрутке пользователем.	Изображения могут либо прокручиваться вместе с содержимым, либо оставаться на месте на экране просмотра. Допустимые значения: scroll , fixed и наследовать .
позиция	Сообщает браузеру, где разместить фоновое изображение.	Изображения могут отображаться в любом месте в пределах HTML-элемента, к которому они применяются. Используйте background-position , чтобы точно разместить изображения для визуального эффекта и наложения слоев. Есть много полезных способов указать положение фона, ключевые слова и числовые значения. Ключевые слова (например, верхний и нижний ) очень полезны и легко читаются. Значения пикселей очень точны, но они не адаптируются к изменению высоты и ширины. Отрицательные значения пикселей полезны при использовании спрайтов CSS, как вы увидите позже. Когда используются проценты и пиксели, отправной точкой всегда является верхний левый угол элемента HTML, хотя способ позиционирования изображения с пикселями и процентами сильно отличается.Пиксели всегда перемещают изображение на заданное количество пикселей вниз и вправо от содержащего поля (или вверх и влево, если они имеют отрицательные значения), независимо от размера изображения и содержащего поля. С другой стороны, проценты перемещают изображение на процент разницы между размером содержащего поля и размером изображения. Если изображение и содержащее его поле имеют одинаковый размер, проценты не будут перемещать изображение вообще. Допустимые значения включают длину , (обычно в пикселях), процентов, (ширины элемента) и ключевые слова верхний , правый , нижний , левый и центральный .Обратите внимание, что центр может использоваться для обозначения как вертикального, так и горизонтального центра. Также обратите внимание, что вы можете смешивать проценты и пиксели в правилах, но не ключевые слова и пиксели или ключевые слова и проценты.
фон	Сокращенное свойство, которое может использоваться для описания всех других свойств в одной строке.	Сокращенные свойства действительно очень хороши. Большинство разработчиков используют их, чтобы сделать CSS как можно более компактным и сгруппировать связанные свойства.Вы можете написать общее правило, используя сокращенную запись, а затем при необходимости переопределить его конкретными свойствами. Свойства всегда должны указываться в одном и том же порядке, чтобы браузеры могли легко интерпретировать предполагаемые стили: цвет URL повтор насадка (используется очень редко; можно не устанавливать) горизонтальное положение вертикальное положение Пример этого сокращения со всеми используемыми свойствами (кроме приложения ) выглядит следующим образом: фон: зеленый URL (логотип.gif) без повтора слева вверху;

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

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

Конструкция

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

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

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

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

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

Код

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

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

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

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

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

  .alert {...}
  

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

  

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

В приведенном выше коде для предупреждения используется класс , а не с идентификатором , потому что это позволяет иметь более одного предупреждения на странице. Например, вы можете добавить предупреждения к элементу формы с несколькими потенциальными ошибками. Цель состоит в том, чтобы сделать ваш 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 и наследуют . По умолчанию ( начальное ) фоновые изображения повторяются. Направление не указано, что означает, что изображение будет мозаичным как по горизонтали, так и по вертикали.Вы, наверное, догадались, что no-repeat - это значение, которое нужно установить, чтобы изображение не было мозаичным в любом направлении. Добавьте следующую выделенную строку ниже в правило CSS:

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

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

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

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

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

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

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

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

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

  body {
    
    фон-повтор: повтор-х;
  }
  

Приложение

Атрибут вложения позволяет указать, как будет вести себя фон, когда пользователь прокручивает страницу вниз.Поведение по умолчанию - 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 для позиционирования нашего изображения. Проверьте, что происходит, когда вы увеличиваете размер текста.
• Примените предупреждение класса к другим элементам, таким как div , p , ul , strong или em . Как можно изменить код, чтобы сделать класс независимым?
• Включите несколько абзацев и список в предупреждение. div . Код все еще работает?
• Визуально проверьте предупреждение в обозревателях 1-го уровня (также известных как обозреватели 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 в 15:00 центральное время:
  

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-спрайты?

Используйте фоновые изображения в ваших представлениях

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

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

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

Добавьте фоновые изображения в книгу

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

Чтобы добавить фоновое изображение:

1. Выберите карту> Фон Изображения, а затем выберите источник данных.

2. В диалоговом окне "Фоновые изображения" нажмите "Добавить". Изображение.

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

   • Введите имя изображения в текст имени. коробка.

   • Нажмите кнопку «Обзор», чтобы найти и выбрать изображение, которое вы хотите добавить к фону.Вы также можете ввести URL-адрес для ссылки на изображение, размещенное в Интернете.

   • Выберите поле для сопоставления с осью x изображения и укажите левое и правое значения. При добавлении карты значения долготы должны быть сопоставлены с осью x с использованием десятичных значений (вместо градусов / минут / секунд или N / S / E / W).

   • Выберите поле для сопоставления с осью Y изображения и укажите верхнее и нижнее значения.При добавлении карты значения широты должны быть сопоставлены с осью Y с использованием десятичных значений (вместо градусов / минут / секунд или N / S / E / W).

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

4. На вкладке «Параметры» можно указать следующие параметры:

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

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

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

5. Нажмите ОК.

Когда вы добавляете поля x и y на полку Rows and Columns в представлении за данными отображается фоновое изображение. Если фоновое изображение не отображается, убедитесь, что вы используете дезагрегированные меры для полей x и y.Разбить все меры, выберите. Изменить каждую меру по отдельности, щелкните правой кнопкой мыши поле на полке и выберите Размер. Наконец, если вы использовали сгенерированные поля широты и долготы для x и y полей, вам нужно будет отключить встроенные карты перед фоновым изображение будет отображаться. Выберите, чтобы отключить встроенные карты.

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

Создайте представление с фоновым изображением

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

1. Разместите поле, сопоставленное с осью x, на полке «Столбцы».

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

2. Разместите поле, сопоставленное с осью Y, на полке «Ряды».

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

Редактировать фоновое изображение

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

Для редактирования изображения:

1. Выберите карту> Фон Изображений.

2. В диалоговом окне "Фоновые изображения" выберите изображение, которое вы хотите отредактировать и нажмите Edit (вы также можете просто дважды щелкните имя изображения).

3. В диалоговом окне «Редактировать фоновое изображение» внесите изменения. к изображению и нажмите ОК.

Включение или отключение фоновых изображений

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

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

Чтобы включить или отключить фоновое изображение:

1. Выберите карту> Фон Изображений.

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

3. Нажмите ОК.

Добавление условий отображения и скрытия к фоновым изображениям

Когда вы добавляете фоновое изображение и включаете его, изображение будет автоматически отображаться на любом листе, имеющем необходимые поля, используемые в представлении. Чтобы изображение не отображалось на всех листах, вы можете указать условия отображения / скрытия. Условия отображения / скрытия условны операторы, которые вы определяете, чтобы указать, когда показывать изображение.За Например, у вас может быть изображение плана этажа многоэтажного дома. Хотя каждое изображение связано с одинаковыми координатами (углы здания), вы не хотите показывать карту первого этажа, когда глядя на информацию о третьем этаже. В этом случае вы можете указать условие, чтобы отображалось только изображение первого этажа, когда поле Этаж равно единице.

Чтобы указать условия отображения / скрытия:

1. Выберите, а затем выберите источник данных.

2. В диалоговом окне "Фоновые изображения" выберите изображение, которое вы хотите добавить условие и нажмите «Изменить».

3. В следующем диалоговом окне выберите вкладку Параметры.

4. Нажмите кнопку «Добавить» внизу. диалогового окна.

5. Выберите поле, на котором будет основано условие. В описанном примере вверху поле Floor.

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

7. Нажмите ОК.

   Условие добавляется к изображению. На примере плана этажа здания условие Заявление: Показывать изображение только тогда, когда Floor равен One.

8. Дважды нажмите ОК, чтобы закрыть фон. Изобразите диалоговые окна и примените изменения.

При добавлении нескольких условий фоновое изображение будет отображаться только при соблюдении всех условий.Например, если фон изображение имеет два условия для имени свойства и этажа, оно будет только показать, когда собственность находится в Greenwood Estates, а на этаже 3.

Удалить фоновое изображение

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

Чтобы удалить изображение:

1. Выберите карту> Фон Изображений.

2. В диалоговом окне "Фоновые изображения" выберите изображение, которое вы хотите удалить и нажмите Удалить.

3. Нажмите ОК.

См. Также

Microsoft Expression | ИТ-услуги

Microsoft Expression Web 4 - это бесплатная программа для студентов через Microsoft Dreamspark.Это программа для веб-дизайна, которая не требует знаний в области программирования и относительно проста в использовании. Вы можете использовать эту программу для создания веб-страниц для использования с вашим NMU MyWeb. В этой статье будут освещены некоторые из основных функций Expression Web 4. Выберите тему ниже или просмотрите всю статью, чтобы получить общее руководство.

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

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

Загрузка в MyWeb

По умолчанию Expression 4 сохраняет веб-сайт и связанные файлы во вложенную папку в папке «Мои веб-сайты», в «Мои документы». Когда вы закончите, вам нужно будет перетащить эти файлы в папку pub, если вы хотите, чтобы они работали на вашей странице MyWeb. Щелкните здесь, чтобы получить дополнительную информацию о загрузке в MyWeb и настройке папки pub.

Создание нового пустого сайта

1. Открыв Expression, выберите «Сайт» в верхнем меню и выберите «Новый сайт».

2. Выберите «Общие», и «Одностраничный сайт», , затем выберите «ОК».

3. Дважды щелкните "default.html" .

4. Пустая страница сайта теперь будет отображаться в центральной панели экрана.

5. Чтобы использовать свой сайт с MyWeb, вы должны сначала изменить некоторые настройки.Выберите «Сайт» вкладку и выберите «Настройки сайта».

6. В окне «Параметры сайта» выберите вкладку «Предварительный просмотр» и снимите флажок «Использовать Microsoft Expression Development Server». Выберите «Применить», , затем «ОК».

7. Чтобы изменить цвет фона или сделать фон изображением или узором, выберите «Формат» и выберите «Фон ...»

8. На вкладке «Форматирование» окна «Свойства страницы» вы можете выбрать «Фоновое изображение» и «Обзор» , чтобы выбрать изображение, или вы можете выбрать цвет из раскрывающегося списка. вниз по меню.
9. Выберите «ОК» для завершения.

10. Теперь вы увидите свой фон на сайте в центральной вкладке.

11. Чтобы добавить слой для ввода текста или изображений, нажмите кнопку «Нарисовать слой» на правой панели слоев. Щелкните свою веб-страницу и перетащите, чтобы создать слой.
    • При нажатии на слой появляются маленькие квадратики, которые можно использовать для перетаскивания и изменения размера слоя. Вы можете переместить слой, выбрав его край и перетащив его.

12. Чтобы вставить изображение, щелкните пункт меню «Вставить» , наведите курсор на «Изображение» и выберите «Из файла ...» , чтобы найти свое изображение.
13. Выберите свое изображение в окне просмотра изображений и выберите «Открыть».

14. Появится окно с названием «Специальные возможности». Вы можете ввести альтернативный текст или описания. Выберите «ОК» , чтобы закрыть его.

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

16. Вы можете изменить выравнивание, размер или границу рисунка или изображения, щелкнув его правой кнопкой мыши и перетащив его, выбрав «Свойства рисунка». Измените настройки по своему вкусу и выберите «ОК» для подтверждения.

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

18. Чтобы вставить ссылку, выделите текст для ссылки и выберите значок ссылки в правом верхнем углу. Введите URL-адрес в поле «Адрес» и выберите «ОК».

19. Чтобы вставить кнопку с возможностью нажатия на слой, разделитель или в другое место, выберите место для вставки и щелкните пункт меню «Вставить» в правом верхнем углу Expression.Выберите «Интерактивная кнопка ...» из раскрывающегося меню.

20. Выберите нужную кнопку из списка «Кнопки:» , введите текст для отображения в поле «Текст:» и введите URL-адрес для ссылки в поле «Ссылка:» . Выберите «ОК».
21. Для сохранения нажмите синюю кнопку дискеты в верхнем левом углу Expression. Перейдите к месту сохранения и выберите «ОК». Если будет предложено сохранить вставленные кнопки и изображения, выберите «ОК.«

22. Для предварительного просмотра своего веб-сайта во время работы с ним выберите пункт меню «Файл», наведите указатель мыши на «Предварительный просмотр в браузере», и выберите браузер для предварительного просмотра. Браузер откроет и отобразит страницу.

Создание нового сайта с помощью шаблона

1. В открытом Expression Web 4 выберите пункт меню «Сайт» и выберите «Новый сайт» .

2. Выберите «Шаблоны» и выберите шаблон (предварительный просмотр показан справа) и нажмите «ОК.«

3. Выберите "default.html" на центральной панели, чтобы открыть и отредактировать шаблон.

4. Щелкните текстовые поля и заголовки, чтобы ввести новый текст.

5. Чтобы заменить изображение на другое, щелкните правой кнопкой мыши и выберите «Свойства изображения ...»
   • Щелкните «Обзор», , чтобы выбрать изображение, и выберите «Открыть», , затем «ОК», , чтобы вставить его.
6. Чтобы изменить размер изображения, щелкните изображение правой кнопкой мыши и выберите «Свойства изображения».
   • Выберите вкладку «Внешний вид» в окне «Свойства изображения» . Здесь вы можете изменить размер, выравнивание и свойства границы. Выберите «ОК» , чтобы применить.

Категория документации:

CSS Фоновые изображения и специальные возможности

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

Проблема

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

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

Сравнение со встроенными изображениями

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

Требования

Для изображений текста - для чего этот метод часто используется - существует четкое требование WCAG 2 уровня AA не использовать изображения текста, когда текст может быть отображен технологической платформой.Для веб-приложений текст почти всегда может быть создан, за исключением шрифтов, которые могут отсутствовать в пользовательских системах. В этих случаях можно использовать технику стиля Куфон. Проблема все еще остается для изображений, которые не являются текстовыми, но имеют смысл, и проблемы все еще актуальны для других требований доступности, таких как Раздел 508.

Решения

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

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

Просто замените недекоративный фон CSS стандартными встроенными изображениями. Это решение не решает проблему производительности, но предоставляет доступное решение, а именно то, сколько сайтов было отображено за последние 15 лет.

Позиционирование частей встроенного изображения

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

Использовать до или после псевдоэлементов

Для отображения изображений могут использоваться псевдоэлементы. Этот метод отлично работает для изображений, чтобы они оставались на экране, но не поддерживается некоторыми браузерами, в основном Internet Explorer 7. Информацию об этом методе можно найти в блоге Paciello Group. Кроме того, псевдоэлементы не могут быть выбраны.

Используйте холст HTML 5

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

Используйте хитрость позиционирования CSS

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

Похоже, что этот метод не работает в разных браузерах одинаково. Firefox по-прежнему отображает текст поверх фонового изображения, в то время как Internet Explorer скрывает текст за изображением. Хотя в режиме высокой контрастности Internet Explorer не отображал текст должным образом.

Заключение

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

No related posts.