Содержание

Можно ли сделать анимированный фон?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+3.5+1.0+1.0+1.0+1.0+

Задача

Вывести анимированный фон на веб-странице.

Решение

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

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

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

Пример 1. Анимированный фон веб-страницы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Анимированный фон</title>
  <style>
   html {
    height: 100%; /* Высота веб-страницы */
    background: #000 url(images/light.gif) 
          no-repeat right bottom; /* Путь к графическому файлу с фоном */
    color: #fff; /* Белый цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Содержимое веб-страницы</p>
 </body>
</html>

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

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

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

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

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

Если Вы хотите сделать фон действительно неповторимым, тогда рекомендую следующую статью:

Как это выглядит смотрите на реальном примере:

Посмотреть примерСкачать

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

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

HTML часть

Для данного примера мы будем задавать фоновое изображение для body, но подобным образом можно сделать для любого блока на странице. Поэтому ничего сверхъестественного в HTML структуре нет:

HTML КОД

1
2
3
4
5
6
7
8
9
<!Doctype html>
<html>
    <head>
        <title>Заголовок страницы</title>
    </head>
    <body>
        <!-- Здесь размещаете контент -->
    </body>
</html>

CSS часть

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

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body {
    /* Путь к изображению относительно данного файла */
    background-image: url(../images/background-photo.jpg);
 
    /* Центрирование изображения по вертикали и горизонтали всегда */
    background-position: center center;
 
    /* Запрещаем повтор изображения */
    background-repeat: no-repeat;
 
    /* Фиксируем изображение - оно остается на месте при прокрутке окна */
    background-attachment: fixed;
 
    /* Изображение будет масштабироваться в зависимости от размеров контейнера */
    background-size: cover;
 
    /* Цвет фона изображения, который будет показываться пока изображение не загрузится */
    background-color:#464646;
 
    /* Эквивалентная сокращенная запись
    * background: url(background-photo.
jpg) center center cover no-repeat fixed; */ }

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

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

Будем использовать Media Queries (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:

1
2
3
4
5
6
7
8
9
/* Для мобильных устройств */
@media only screen and (max-width: 767px) {
    body {
        /* Если размер экрана меньше 767px показываем уменьшенное изображение,
        * которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки 
        * на мобильных устройствах */
        background-image: url(../images/background-photo-mobile-devices.
jpg); } }

Что мы сделали? Если ширина окна браузера на устройстве будет менее 767 пикселей, то будем использовать другое изображение. Всё очень просто.

Бонус к статьей «Где брать фоновые изображения?»

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

Вывод

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

Успехов!

С Уважением, Юрий Немец

Большое фоновое изображение для сайта через CSS background

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

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

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

Если у вас есть большое фоновое изображение, которое отлично выглядит при разрешении монитора 1280 пикселей, то для бОльших экранов эффект от сайта может быть слегка испорчен из-за «обрезанного фона» (см. рис. выше).

Пример 1.

Самый простой способ избежать этой ошибки — сделать так, чтобы края изображения были такого же цвета, как и фон сайта (BODY background color). Хорошо данный пример иллюстрирует картинка ниже:

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

Кстати, в одном из постов я уже рассказывал о свойстве CSS background и его возможностях. Код для примера выглядит так:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(изображение.jpg) no-repeat center top;
 
  width: 100%;
  display: table;
}

body { padding: 0; margin: 0; background: #f8f7e5 url(изображение.jpg) no-repeat center top; width: 100%; display: table; }

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

Пример 2. Двойные изображения

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

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

Пример 3. Небесный фон.

Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY). Облака центрируются с помощью дополнительного слоя DIV — демо верстки можно глянуть здесь.

Данный пост является переводом статьи — How to: CSS Large Background с потрясающего дизайнерского блога webdesignerwall. Кстати там же есть красивая подборка сайтов с большими изображениями для фона.

P.S. Создаем лого Web 2.0 в GIMP — для любителей альтернативного софта.

Пособие для начинающих по позиционированию фона в CSS — CSS-LIVE

Перевод статьи A Primer To Background Positioning In CSS с сайта blogs.adobe.com, автор — Сара Суэйдан.

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

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

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

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

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

Области боксовой модели CSS

У элемента в CSS определены три области, называемые боксами: border box (бокс по границы включительно), padding box (бокс по отступу) и content box (бокс по содержимому). border box – область элемента, которая включает всю его внутреннюю часть плюс область, которую занимают сами границы.

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

Content box – область, созданная контентом элемента, исключающая любые отступы и границы.

Области бокса элемента. Изображение взято из CSS-справочника на Codrops, статья про свойство background-origin.

Есть также четвёртая область — «margin box», включающая элемент и его внешние поля, которые указываются при помощи свойства margin.

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

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

Система координат элемента

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

У HTML-элемента есть система координат в CSS. У SVG-элементов, напротив, нет похожей системы координат, поскольку они не регламентируются концепцией боксовой модели.

Начальная точка системы координат в CSS расположена в левом верхнем углу элемента.

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

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

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

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

К элементу применена полупрозрачная граница в 20px. Заметьте, как изображение позиционируется в верхнем левом углу внутреннего отступа элемента.

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

Используя свойство background-position, о котором мы поговорим в этой статье, мы можем изменять позицию изображения внутри этой системы координат.

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

Изменение области позиционирования фона и системы координат при помощи

background-origin

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

Оно принимает одно из трёх значений: padding-box  (значение по умолчанию), content-box и border-box.

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

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

Смотрите пример Сары Суэйден (@SaraSoueidan) «Разные значения background-origin» на CodePen.

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

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

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

Позиционирование фоновых изображений при помощи

background-position

В прошлом разделе мы видели, как фоновое изображение по умолчанию позиционируется в левом верхнем углу области позиционирования. Это связано с тем, что по умолчанию значение  свойства background-position равно 0% 0%.

По умолчанию для background-position используются процентное значение. В background-position можно подставлять либо процентное, либо абсолютное значение, которые указывают смещение изображения от одного из четырёх краёв области позиционирования (вверх, право, низ, лево)

Углы смещения элемента и система координат в CSS.

В дополнение к процентным и абсолютным значениям, для смещения можно использовать ещё и пять ключевых слов: top, rightbottomleft и center.

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

background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;

Если вы укажите только одно значение, то второе будет считаться, как center. Если укажите два значения, то первое будет определять смещение от левого угла — т.е. горизонтальную позицию, а второе – смещение вниз от верхнего угла — вертикальную позицию.

background-position: 10% 50%; /* смещение на 10% вправо, и 50% вниз от верха */
background-position: top; /* идентично `top center` */
background-position: 50px; /* идентично `50px center` */

Можно смешивать и сочетать значения, комбинируя длину с процентами и/или ключевыми словами. Заметьте, что пару ключевых слов можно поменять местами, тогда как комбинацию ключевого слова и длины либо процентов — нельзя. Поэтому center left — правильная запись, а 50% left  — нет, она должна выглядеть так: left 50%. При комбинировании ключевого слова и длины или процентного значения, первое значение всегда отвечает за горизонтальное смещение, а второе — за вертикальное.

Собственно говоря, ключевое слово – это сокращённая запись для определённых процентных значений. Точнее сказать: top — смещение 0% от верхнего края, bottom — смещение 100% от верхнего края, left — смещение  0%  от левого края, right — смещение 100%  от левого края, а center — смещение 50% в том направлении (горизонтальном или вертикальном), к которому оно применяется.

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

Как работают абсолютные значения background-position

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

Лучший способ объяснить и понять это – показать наглядно, поэтому здесь представлено два примера абсолютных значений позиции фона и то, как браузеры реализуют позиционирование фонового изображения при помощи абсолютных значений. Элементу в этих двух примерах задан размер 100px на 80px.

Позиционирование фонового изображения при помощи абсолютных значений.

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

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

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

Как работают процентные значения background-position

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

Например, процентное значение 0% 0% выровняет точку 0% 0% изображении с точкой 0% 0%  в системе координат области позиционирования фона. Значение 50% 75% свойства background-position выровняет точку, которая находится в 50% от левого и в 75%  от верхнего края изображения с точкой, которая расположена на 50% 75% в области позиционирования фона.

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

Позиционирование фонового изображения при помощи процентных значений..

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

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

Смотрите пример Сары Суэйден (@SaraSoueidan) «background-position Example#2» на CodePen.

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

Смещение относительно любого края

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

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

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

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

background-position: top 1em right 3em; /* фоновое изображение позиционируется на 1em вниз от верхнего угла и на 3em влево от правого угла */

background-position: right 1em bottom 1em; /* фоновое изображение позиционируется на 1em вверх от нижнего угла и 1em влево от правого угла */

background-position: left 20px bottom 50px;

Если указано три из четырёх значений, четвёртое значение приравнивается к нулю.

При использовании четырёхзначного синтаксиса следует кое-что помнить: когда приведено три или четыре значения, тогда каждое процентное значение или длина представляют смещение и должны идти за ключевым словом, указывающим край, от которого должно смещаться фоновое изображение. Например, background-position: bottom 10px right 20px представляет вертикальное смещение на 10px вверх от нижнего края и горизонтальное смещение на 20px влево от правого края. Если указано три значения, недостающее смещение приравнивается к нулю. Если вы укажите два численных смещения и одно ключевое слово, то такое значение будет неверным и браузер использует 0% 0% — значение по умолчанию.

Чтобы лучше это понять, поиграйтесь со значениями свойства background-position в следующем живом примере. Для лучшего понимания фоновое изображение сначала позиционируется так, чтобы оно смещалось на 0 пикселей от нижнего и 2em от правого края.

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

Установка размеров, повторение, обрезка изображений и многое другое!

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

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

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

Я надеюсь, что эта статья оказалась для вас полезной. Спасибо за чтение.

P.S. Это тоже может быть интересно:

Как отличить контентное изображение от декоративного — Блог HTML Academy

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

Теория

Контентное изображение

Слово контент происходит от английского слова «content» — содержимое. С помощью таких изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке <img>. Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.

Декоративное изображение

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

Практика

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

Очевидные случаи

Изображение товара в карточке товара, контентное
Карточка товара на сайте EdoqueКарточки товаров на сайте Cadbury

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

Реализация: <img>

Логотип, контентное
Логотип на сайте Haribo-shopЛоготип на сайте EvercodelabПартнёрские логотипы на сайте Specia

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

И также часто встречаются блоки с партнёрскими логотипами. В таких ситуациях логотипы являются контентными изображениями.

Реализация: <img>

Изображения и текст, контентное
Изображение в статье на сайте MeduzaИзображения товара на индивидуальной странице на сайте PichShop

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

Реализация: <img>

Вспомогательная иконка, декоративное
Вспомогательные декоративные иконки на сайте MediaMarkt

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

Реализация: background-image для псевдоэлемента

Вспомогательные декоративные иконки на сайте MediaMarkt

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

Реализация: background-image для всего блока или для псевдоэлемента

Фоновое изображение, декоративное
Фоновая картинка с фруктами на сайте EdoqueПитерское фоновое изображение на сайте Sobor.gorozhanko.ru

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

Реализация: background-image для всего блока

Спорные моменты

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

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

Реализация: <img>

Слайдер на сайте S7

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

Реализация: background-image для всего блока

Карта с изображением
Карта в блоке с контактами. Макет Девайс.

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

Реализация: <img> (атрибут alt должен описывать изображение, в данном случае — Карта офиса по адресу улица Строителей, 15)

Иконки соцсетей
Социальные кнопки на сайте Haribo

Кнопки с социальными сетями представляют собой более интересный случай. С одной стороны, они являются декоративными, так как являются частью интерфейса сайта, однако, если их картинки не загрузятся — информация всё же пропадёт (пользователь будет не способен понять к какой социальной сети относится каждая ссылка). Таким образом, здесь применяется комплексный подход: внутри ссылки обязательно прописывается поясняющий текст. Изображение на этих кнопках-ссылках декоративные. Для доступного скрытия текста ссылки необходимо добавить класс .visually-hidden. Код для этого паттерна скрытия можно найти тут или почитать в нашей статье. Таким образом, при потере CSS-файла, изображение пропадёт, а текст ссылки появится. При нормальной работе сайта пользователь увидит лишь изображение. Также необходимо не забывать про доступность — так как в разметке мы прописываем текст ссылки, то при чтении сайта скринридером, ссылки будут озвучены.

Реализация: background-image для ссылки

Вывод

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

CSS3. Работа с множественными фонами

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

Композиция фонов

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

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

Могут быть и другие разумные причины 🙂

Классический подход


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

<div>
 <div>
 <div><div></div></div>               
 <div></div>
 </div>
</div>

Блок с классом «fishing» внутри «mermaid» исключительно для демонстрационных целей.

Теперь немного стилей:

.sample1 .sea, .sample1 .mermaid, .sample1 .fishing {
 height:300px;
 width:480px;
 position: relative;
}
 
.sample1 .sea {
 background: url(media/sea.png) repeat-x top left;         
}
 
.sample1 .mermaid {
 background: url(media/mermaid. svg) repeat-x bottom left;
}
 
.sample1 .fish {
 background: url(media/fish.svg) no-repeat;
 height:70px;
 width:100px;
 left: 30px;
 top: 90px;
 position: absolute;
}
 
.sample1 .fishing {
 background: url(media/fishing.svg) no-repeat top right 10px;
}

Результат:

В данном примере три вложенных фона и один блок с рыбками, расположенный рядом с «фоновыми» блоками. В теории, рыбок можно перемещать, например, с помощью JavaScript или CSS3 Transitions/Animations.

Кстати, в этом примере для «.fishing» используется новый синтаксис для позиционирования фона, также определенный в CSS3:

background: url(media/fishing.svg) no-repeat top right 10px;

На текущий момент он поддерживается в IE9+ и Opera 11+, но не поддерживается в Firefox 10 и Chrome 16. Так что пользователи последних двух браузов поймать рыбку пока не смогут.

Поехали дальше. Как упростить эту конструкцию?

Множественные фоны

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

<div>
 <div>                    
 <div></div>
 </div>
</div>

И соответствующие стили:

.sample2 .sea {
 height:300px;
 width:480px;
 position: relative;
 background-image:  url(«media/fishing.svg»), url(«media/mermaid.svg»), url(«media/sea.png»); 
 background-position: top right 10px, bottom left, top left;
 background-repeat: no-repeat, repeat-x, repeat-x ;
}
 
.sample2 .fish {
 background: url(«media/fish.svg») no-repeat;
 height:70px;
 width:100px;
 left: 30px;
 top: 90px;
 position: absolute;
}

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

Результат полностью совпадает:

Одним правилом


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

<div>
 <div></div>
</div>

Стили:

.sample3 .sea {
 height:300px;
 width:480px;
 position: relative;
 background-image:  url(«media/fishing.svg»), url(«media/mermaid.svg»), url(«media/fish.svg»), url(«media/sea.png»); 
 background-position: top right 10px, bottom left,  30px 90px, top left;
 background-repeat: no-repeat, repeat-x ;
}

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

В данном случае, это эквивалентно такому описанию:

background-repeat: no-repeat, repeat-x, <mark>no-repeat, repeat-x</mark>;

Еще короче


Если вы помните CSS 2. 1, в нем определена возможность описывать фоновые изображения в краткой форме. Как на счет множественных изображений? Это также возможно:

.sample4 .sea {
 height:300px;
 width:480px;
 position: relative;
 background: url(«media/fishing.svg») top right 10px no-repeat,
 url(«media/mermaid.svg») bottom left repeat-x,
 url(«media/fish.svg») 30px 90px no-repeat,
 url(«media/sea.png») repeat-x;               
 }

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

Динамичные изображения

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

Кстати, вот пример из жизни — тема с одуванчиком в Яндексе:

Если вы залезете в код, вы увидите там примерно следующее:

 <div class=b-skin-bg sizcache=»272″ sizset=»0″>
 <div class=b-fluff-bg sizcache=»272″ sizset=»0″>
 <div class=b-fluff__sky sizcache=»272″ sizset=»0″>
 <div class=b-fluff__cloud></div>
 <div class=b-max-width sizcache=»214″ sizset=»0″>
 <div class=b-fluff__placeholder sizcache=»302″ sizset=»0″>
 <div jQuery1328289994769=»30″></div>
 <div jQuery1328289994769=»31″></div>
 <div jQuery1328289994769=»32″></div>
 …
 </div>
 </div>
 </div>
 </div>
 </div>

Блоки с классами «b-fluff-bg», «b-fluff__cloud» и «b-fluff__item» содержат фоновые изображения, накладывающиеся друг на друга. Причем фон с облаками постоянно прокручивается, а одуванчики летают по экрану.

Можно ли это переписать с использованием множественных фонов? В принципе, да, но при условии 1) поддержки этой возможности в целевых браузерах и… 2) читайте дальше 😉

Как добавить динамики множественным фонам? В такой ситуации оказывается удобным, что во внутреннем представлении браузер раскидывает отдельные параметры фоновых изображения по соответствующим правилам. Например, для позиционирования есть «background-position», и для сдвигов достаточно изменять только его. Однако имеется и плата за использование множественных изображений — в этом правиле (и любом аналогичном) необходимо перечислять позицию для всех фонов, заданных для вашего блока, и нельзя сделать это выборочно.

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

$(document).ready(function() {
 var sea = $(«.sample5 .sea»)[0];
 var fishesX = 30;
 var fishesY = 90;
 var fishX = 0;
 var fishY = 0;
 var mermaidX = 0;
 var t = 0;

 function animationLoop() {
 fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0));
 if(—fishesX < 0) fishesX = 480;
 mermaidX += 0.5;
 if(mermaidX > 480) mermaidX = 0;
 fishY = -10 + (10 * Math.cos(t * 0.091));
 fishX = 10 + (5 * Math.sin(t * 0.07));

 sea.style.backgroundPosition = «top » + fishY + «px right » + fishX + «px, » + mermaidX + «px bottom,» + fishesX + «px » + fishesY + «px, top left»;

 window. requestAnimFrame(animationLoop);
 }
 animationLoop();
});

где

window.requestAnimFrame = (function() {
 return
 window.requestAnimationFrame ||
 window.msRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.oRequestAnimationFrame ||
 window.webkitRequestAnimationFrame ||
 (function(callback) { window.setTimeout(callback, 1000 / 60); });
})();

Результат (видео):

И, кстати, анимации также можно делать через CSS3 Transitions/Animations, но это тема для отдельного обсуждения.

Паралакс и интерактив

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

youtube.com/v/AzHb82fjpR8?version=3&hl=ru_RU»/>

Множественные фоновые изображения удобны в подобных сценариях, так как пока мы говорим только про фон (а не контент), их использование позволяет избежать замусоривания html-кода и DOM. Но за все приходится платить: я не могу обращаться к отдельным элементам композиции по имени, id, классу или какому либо другому параметру. О порядке элементов в композиции я должен явно помнить в коде и на каждое изменение любого параметра любого элемента фактически я должен склеивать строку, описывающую значения этого параметра для всех элементов, и обновлять ее для всей композиции.

sea.style.backgroundPosition = «top » + fishY + «px right » + fishX + «px, » + mermaidX + «px bottom,» + fishesX + «px » + fishesY + «px, top left»;

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

Что там с совместимостью?

Все современные версии популярных браузеров, включая IE9+, поддерживают множественные изображения (можно сверяться, например, с сaniuse).

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

.multiplebgs body {
 /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */
}
.no-multiplebgs body {
 /* laaaaaame fallback */
}

Если вас смущает использование JS для предоставления обратной совместимости, вы можете просто дважды объявить background, правда, это тоже имеет свои минусы в виде возможной двойной загрузки ресурсов (это зависит от реализации обработки css в конкретном браузере):

/* multiple bg fallback */
background: #000 url(…) …;
/* Awesome multiple BG declarations that transcend reality and imsourcess chicks */
background url(. ..), url(…), url(…), #000 url(…);

Если вы уже начали думать о Windows 8 имейте в виду, что вы можете использовать множественные фоны при разработке metro style приложений, так как внутри используется тот же движок, что и в IE10.

Источник


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

Затемнение изображений простым и быстрым способом на чистом CSS

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

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

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


Фоновое изображение до затемнения

В записи свойства множественных фоновых изображений первым идет самый верхний фон, так что составная фотография, выполненная Thomas Shahan, располагается последней:

 

h2 {
        font-family: Calluna Sans, Arial, sans-serif;
        color: #fff;
        margin-top: 0;
        background: linear-gradient(rgba(0,0,0,0.5),
         rgba(0,0,0,0.5)),
          url('bugs.jpg');
        font-size: 5rem;
        padding: 2rem;
        text-align: center;
        background-repeat: no-repeat;
        background-size: cover;
        word-spacing: 5rem;
}

Применим этот код CSS к коду HTML ниже:

<h2>Бешеный жук</h2>

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

Как установить несколько фоновых изображений с помощью CSS?

Как установить несколько фоновых изображений с помощью CSS?

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

Используемые свойства фона перечислены ниже:

  • фоновое изображение: url (), url (),…; Это свойство используется для установки одного или нескольких фоновых изображений для элемента, разделенных запятыми.
  • background-position: справа внизу, слева вверху; Это свойство используется для установки положения различных изображений на странице. Он устанавливает начальную позицию для каждого фонового изображения.
  • фон-повтор: без повторения, повторение; Это свойство используется для установки повторения фоновых изображений. Фоновое изображение может повторяться по горизонтальной и вертикальной оси.
  • размер фона: обложка | содержать | 30% | 200px 100px; Это свойство используется для установки размера фонового изображения элемента.

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

< html >

< Головка >

< стиль >

корпус {

выравнивание текста: по центру;

}

h2 {

цвет: зеленый;

}

#GFG {

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

background-position: center, center;

фоновый повтор: без повтора, без повтора;

размер фона: 400 пикселей 200 пикселей, 500 пикселей 400 пикселей;

отступ: 25 пикселей;

высота: 400 пикселей;

}

стиль >

Головка >

< корпус >

< div id = "GFG" >

< h2 > GeeksforGeeks h2 >

< h3 > Установить несколько фонов h3 >

< p >

Элемент содержит два фоновых изображения

p >

div >

корпус >

html >

Выход:

Пример 2: Используйте сокращенное свойство фона, чтобы указать несколько фоновых изображений.

< html >

< Головка >

< стиль >

h2 {

цвет: зеленый;

}

корпус {

выравнивание текста: по центру;

}

#GFG {

фон:

центр без повтора,

центр без повтора;

размер фона: 400 пикселей 200 пикселей, 400 пикселей 400 пикселей;

отступ: 25 пикселей;

высота: 400 пикселей;

}

стиль >

Головка >

< корпус >

< div id = "GFG" >

< h2 > GeeksforGeeks h2 >

< h3 > Установить несколько фонов h3 >

< p >

Элемент содержит два фоновых изображения

p >

div >

корпус >

html >

Выход:


Десять примеров для установки изображения с помощью свойства фонового изображения CSS

Назначение свойства фонового изображения CSS

Свойство CSS background-image используется для установки фонового изображения элементов HTML, таких как div, абзацы, заголовки, заголовки таблиц, тело и т. Д.

Вы можете устанавливать изображения с разными расширениями, такими как png, jpg, gif, svg и т. Д.

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

Настройка фона одного изображения:

background-image: url («images / demo.jpg»);


Или используйте сокращенное свойство фона:

фон: url («images / demo.jpg ”);


Вы также можете использовать абсолютный путь:

фоновое изображение: & nbsp; URL («http://www.example.com/images/demo.jpg»);


Установка нескольких фоновых изображений:

background-image: url («images / image1. jpg»), url («images / image2.jpg »), url (« images / image3.jpg »);

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

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

Создается класс CSS, в котором используется фоновое изображение. Класс назначается тегу

. Смотрите код и демонстрацию в Интернете:

См. Онлайн-демонстрацию и код

Следующий класс устанавливает фоновое изображение:

.divbk {

background-image: url ("images / sunset.jpg");

высота: 400 пикселей;

ширина: 450 пикселей;

}


Установка примера резервного цвета

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

фон: url («images / sunset1. jpg ») #eee;

Посмотреть демонстрацию онлайн:

См. Онлайн-демонстрацию и код

В URL-адресе для демонстрации дано неправильное имя изображения. Поскольку изображение недоступно, вместо него используется цвет фона:

.divbk {

фон: url ("images / sunset1.jpg") # A3B8C0;

высота: 400 пикселей;

ширина: 450 пикселей;

}


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

В этом примере я использовал два изображения в свойстве CSS3 background-image.Наряду с настройкой фоновых изображений используются следующие свойства background position и background-repeat:

См. Онлайн-демонстрацию и код

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

background-image: url ("images / car. jpg"), url ("images / motoway.jpg");

высота: 500 пикселей;

ширина: 400 пикселей;

background-position: center, left;

фоновый повтор: без повтора;


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

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

Отображение фонового изображения с прозрачностью или непрозрачностью

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

В CSS одним из способов может быть использование фона с linear-gradient и использование там RGB, что позволяет установить непрозрачность.

Следующий пример демонстрирует, как это можно сделать:

См. Онлайн-демонстрацию и код

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

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

14

18

19

.divbk {

высота: 450 пикселей;

ширина: 400 пикселей;

фон: -webkit-linear-gradient (сверху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg");

фон: -o-linear-gradient (top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url ("images / motoway.jpg");

фон: -ms-linear-gradient (top, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway. jpg ");

фон: -moz-linear-gradient (top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url (" images / motoway.jpg ");

фон: -webkit-gradient (линейный, слева вверху, слева внизу, остановка цвета (0%, rgba (255,255,255,0,7)), остановка цвета (100%, rgba (255,255,255,0.7))), URL ("images / motoway.jpg");

фон: linear-gradient (вверх, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg) ");

}


Свойство CSS3 совместимо со всеми основными браузерами; однако вам придется обращаться с каждым отдельно.Например, в Mozilla Firefox вы должны использовать эту строку:

фон: -moz-linear-gradient (вверху, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg");


В этом примере я использовал ту же высоту и ширину для div, что и изображение. Если у вас есть меньшее изображение или больший div, используйте свойство repeat, как показано ниже:

фон: linear-gradient (вверх, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url («images / motoway.jpg» повторяется 0 0);


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

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

Использование фонового изображения в таблицах HTML

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

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

В следующей демонстрации я установлю фоновое изображение только для заголовков таблиц:

См. Онлайн-демонстрацию и код

Следующий CSS используется для создания таблицы, особенно фокус на заголовке таблицы CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

14

18

19

20

21

22

23

24

25

26

27

28

29

30

000

34

35

36

37

.демотбл {

граница-обрушение: обрушение;

}

.demotbl th {

цвет: # EAE635;

размер шрифта: 20 пикселей;

фон: url ("images / CSS-background-image-table.jpg");

высота: 50 пикселей;

ширина: 150 пикселей;

радиус границы: 6 пикселей;

}

. demotbl td {

граница: 1 пиксель, пунктирная черная;

бордюр-верх: нет;

цвет: # 002F5E;

отступ: 15 пикселей;

ширина: 100 пикселей;

цвет фона: # D2E6FB;

}


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

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

Установка фонового изображения на всю страницу Пример CSS

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

Вы можете увидеть полный код и демонстрацию, щелкнув ссылку ниже.

См. Онлайн-демонстрацию и код

Установка полного фонового изображения для примера div

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

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

См. Онлайн-демонстрацию и код

CSS:

фон: исправлен центр url ("images / background.jpg") по центру;

фон-повтор: повторение;

высота: 300 пикселей;

ширина: 200 пикселей;


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

Установка размера фонового изображения

Используя свойство background-size с background-image, вы можете установить высоту и ширину фонового изображения.

Синтаксис использования свойства CSS background-size, например:

размер фона: 200 пикселей 300 пикселей;

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

См. Пример ниже:

См. Онлайн-демонстрацию и код

Вы также можете указать высоту и ширину в процентах.Например:

background-image: url ("images / banana.jpg");

размер фона: 70%;


Вы должны использовать background-repeat: no-repeat; в этом случае, в противном случае оставшееся пространство контейнера (в этом случае div) будет заполнено этим изображением.

Применение преобразования к фоновым изображениям

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

Ниже приведены несколько примеров использования свойства transform с фоновыми изображениями:

Демонстрация поворота изображения на 20 градусов

См. Онлайн-демонстрацию и код

CSS:

фон: url ("images / bk.jpg");

преобразование: поворот (20 градусов);


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

Ниже приведен пример, в котором используется перекос со значениями x и y :

См. Онлайн-демонстрацию и код

Следующий CSS используется для перекоса изображения по свойству преобразования:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

14

18

19

20

21

22

23

24

25

26

27

28

29

30

000

34

35

36

37

. divbk {

фон: url ("images / bk.jpg");

-webkit-transform: skew (10deg, 10deg);

-moz-transform: skew (10deg, 10deg);

-ms-преобразование: наклон (10deg, 10deg);

-о-преобразование: наклон (10deg, 10deg);

преобразование: наклон (10deg, 10deg);

высота: 230 пикселей;

ширина: 215 пикселей;

поля: 42 пикселя;

}

.контейнер {

бордюр: сплошной черный 1px;

высота: 400 пикселей;

ширина: 300 пикселей;

цвет фона: # D5E6F4;

}


См. Полный код, щелкнув изображение или ссылку выше.

Последнее слово

Свойство CSS background-image следует использовать, если оно является частью дизайна, а не содержимым.Изображения маленькие и должны повторяться. Вы можете смешивать небольшие изображения со свойствами CSS3.

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

Если изображения предназначены для содержания и имеют некоторое семантическое значение, вам следует использовать тег для включения изображений на вашу веб-страницу. Вы можете использовать теги alt и title в теге , которые важны для целей SEO, чтобы также передать смысл поисковым системам.

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

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

Использование фоновых изображений со ссылками | Джордж Орнбо

Последнее обновление

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

С небольшим количеством CSS легко добавлять значки в ваши ссылки.

Приблизительное время чтения: 2 минуты

Оглавление

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

Разметка

В этом примере у нас есть простая ссылка в div

  
  

CSS

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

Объяснение:

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

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

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

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

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

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

Теги

Недавние сообщения

Об авторе

Джордж Орнбо (George Ornbo) - инженер-программист из Бакингемшира, Англия.

Он является автором Sams Teach Yourself Go за 24 часа и Sams Teach Yourself Node. js за 24 часа. Его можно найти в большинстве обычных мест в виде фигур.

← http://shapeshed.com

Контент находится под лицензией Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)

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

Избегайте отображения информационных изображений на фоне CSS

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

По причинам доступности авторам не следует использовать фон изображения как единственный способ передачи важной информации. См. Интернет Руководство по доступности контента F3 [WCAG20]. Изображения недоступны в неграфических презентациях, и фоновые изображения могут быть отключены в высококонтрастные режимы отображения. Источник .

Не могу избежать использования изображений CSS или добавить замещающий текст для "неважные" фотографии окружающей среды и т.

д.?

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

При предоставлении альтернативного текста для изображения CSS есть количество рассмотрений

Если

в теге есть какое-либо содержимое, тогда role = "img" и aria-label может скрыть внутреннее содержимое из-за доступных расчет имени , или вспомогательные технологии могут просто игнорировать aria-label .

Поэтому не помещайте фоновое изображение CSS внутри

который содержит любой контент. Лучше использовать пустой и aria-label с role = "img"

Сделайте это:


<диапазон role = "img" aria-label = "[поместите альтернативный текст здесь]>
[все остальное мое содержание]

Не делайте этого:


[все остальное моего содержания]

Что делать, если у автора должно быть изображение CSS в div, содержит контент

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

, которое завершает другой контент, затем хакерский запасной вариант - сделать это.

<диапазон role = "img" aria-label = "[поместите альтернативный текст здесь]>
[все остальное мое содержание]

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

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

Сводка

  • Старайтесь не использовать CSS для важных информационных изображений
  • Для окружающих изображений, которые являются CSS, любезно предоставить альтернативный текст. При этом поместите изображение в собственное пустой с этикеткой aria и role = "img. Это также верно, в ситуации где CSS должен использоваться для информационного содержания.
  • Если
    с изображением CSS ОБЯЗАТЕЛЬНО ДОЛЖЕН содержать другой контент, а затем предоставить пустой с aria-label и role = "img" сразу после
    , имеющего изображение.

Не стесняйтесь комментировать в Twitter @davidmacd

Информация об авторе:

Дэвид Макдональд - ветеран WCAG, соредактор использования WAI ARIA в HTML5 и член рабочей группы по доступности HTML5. Мнения мои собственные.


Фоновое изображение - Tailwind CSS

Линейные градиенты

Чтобы придать элементу фон с линейным градиентом, используйте одну из утилит bg-gradient- {direction} в сочетании с утилитами остановки цвета градиента.

Адаптивный

Чтобы управлять фоновым изображением элемента в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите фонового изображения. Например, используйте md: bg-gradient-to-r , чтобы применить утилиту bg-gradient-to-r только при средних размерах экрана и выше.

  

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

Настройка

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

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

Вы можете добавить свои собственные фоновые изображения, отредактировав раздел theme.backgroundImage в файле tailwind.config.js :

 
  module.exports = {
    тема: {
      продлевать: {
        backgroundImage: theme => ({
+ 'hero-pattern': "url ('/ img / hero-pattern.svg ') ",
+ 'footer-texture': "url ('/ img / footer-texture.png')",
        })
      }
    }
  }  

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

Эти классы будут иметь вид bg- {key} , поэтому, например, hero-pattern превратится в bg-hero-pattern .

Варианты

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

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

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

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ backgroundImage: ['hover', 'focus'],
      }
    }
  }  

Оптимизация фоновых изображений CSS с помощью медиа-запросов

• Обновлено

Появляется в: Быстрое время загрузки

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

Предварительные требования #

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

Ознакомьтесь с адаптивными фоновыми изображениями #

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

  1. Откройте неоптимизированную демонстрацию на новой вкладке Chrome.
  2. Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
  3. Щелкните вкладку Сеть .
  4. Обновить страницу.

Вы увидите, что единственное запрошенное изображение - это background-desktop.jpg , размер которого составляет 1006 КБ :

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

Вы можете увидеть стили, управляющие фоновым изображением, в style.css:

  body {
background-position: center center;
background-attachment: исправлено;
фон-повтор: без повтора; размер фона: обложка;
background-image: url (images / background-desktop.jpg);
}

Вот значение каждого из используемых свойств:

  • background-position: center center : центрировать изображение по вертикали и горизонтали.
  • background-repeat: no-repeat : показать изображение только один раз.
  • background-attachment: fixed : Избегайте прокрутки фонового изображения.
  • background-size: cover : Измените размер изображения, чтобы покрыть весь контейнер.
  • background-image: url (images / background-desktop.jpg) : URL-адрес изображения.

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

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

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

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

Использование медиазапросов - это распространенный метод объявления таблиц стилей, которые будут применяться только к определенным типам носителей или устройств.Они реализуются с помощью правил @media, которые позволяют вам определять набор точек останова, в которых определены определенные стили. Когда выполняются условия, определенные правилом @media (например, определенная ширина экрана), будет применена группа стилей, определенных внутри точки останова.

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

  • В стиле .css удалить строку, содержащую фоновое изображение URL:
  body {
background-position: center center;
background-attachment: исправлено;
фон-повтор: без повтора; размер фона: обложка;
background-image: url (images / background-desktop. jpg);
}
  • Затем создайте точку останова для каждой ширины экрана на основе общих размеров в пикселях, которые обычно имеют экраны мобильных устройств, планшетов и настольных компьютеров:

Для мобильных устройств:

  @media (max-width : 480px) {
body {
background-image: url (images / background-mobile.jpg);
}
}

Для планшетов:

  @media (min-width: 481px) и (max-width: 1024px) {
body {
background-image: url (images / background-tablet.jpg);
}
}

Для настольных устройств:

  @media (min-width: 1025px) {
body {
background-image: url (images / background-desktop.jpg);
}
}

Откройте оптимизированную версию style.css в своем браузере, чтобы увидеть внесенные изменения.

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

Измерение для разных устройств #

Затем визуализируйте получившийся сайт на экранах разных размеров и на смоделированных мобильных устройствах:

  1. Откройте оптимизированный сайт на новой вкладке Chrome.
  2. Сузьте область просмотра (менее 480 пикселей ).
  3. Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
  4. Щелкните вкладку Сеть .
  5. Обновить страницу. Обратите внимание, как запрашивалось изображение background-mobile.jpg .
  6. Расширьте область просмотра. Как только он станет шире 480px , обратите внимание, что запрашивается background-tablet.jpg . Как только он станет шире 1025px , обратите внимание, что запрашивается background-desktop.jpg .

При изменении ширины экрана браузера запрашиваются новые изображения.

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

Размер нового мобильного фона на на 67% меньше, чем у рабочего стола.

Сводка #

В этом руководстве вы научились применять медиа-запросы для запроса фоновых изображений, адаптированных к определенным размерам экрана, и экономии байтов при доступе к сайту на небольших устройствах, таких как мобильные телефоны.Вы использовали правило @media для реализации адаптивного фона. Этот метод широко поддерживается всеми браузерами. Новая функция CSS: image-set (), может использоваться для той же цели с меньшим количеством строк кода. На момент написания этой статьи эта функция поддерживается не во всех браузерах, но вы можете следить за тем, как развивается внедрение, поскольку она может представлять интересную альтернативу этой технике.

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

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