Варианты повторения фоновой картинки в CSS3 - «CSS3» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
29-03-2016, 12:21
Варианты повторения фоновой картинки в CSS3 - «CSS3»
Рейтинг:
Категория: Самоучитель CSS / CSS3

В CSS 2.1 свойство background-repeat имеет четыре значения: no-repeat, repeat, repeat-x и repeat-y. Хотя они, безусловно, полезны, но не позволяют полностью управлять процессом повторения и картинки будут обрезаны, если они не помещаются в контейнер точное число раз.

CSS3 вводит два новых варианта: space и round.

background-repeat: space

Вариант space будет повторять картинки по горизонтали и вертикали без обрезания или изменения размера изображения:

background-repeat: space;

background-repeat: round

Вариант round будет повторять картинки по горизонтали и вертикали без обрезания, но изображение может быть изменено:

background-repeat: round;

 

Предположим, у нас есть фоновое изображение шириной 100px (фактический размер или изменённый с помощью свойства background-size). Оно располагается в элементе шириной 520px по горизонтали, тогда:

round(520 / 100) = round(5.2) = 5

Браузер будет показывать пять изображений, но задаст ширину картинка как 104px (520px/5). Изображение сделано шире, чтобы вписываться в контейнер.

Различные повторения по ширине и высоте

background-repeat может содержать два значения для изменения горизонтального и вертикального повторения:

background-repeat: round space; /* ширина меняется, высота нет */
background-repeat: space round; /* ширина исходная, высота меняется */
background-repeat: space no-repeat; /* повторять только по горизонтали */

Изменение позиции фона

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

Работа в браузерах

Два браузера поддерживают свойства с round и space. Угадайте, какие? Ошибаетесь: это IE9 и Opera. На момент написания статьи, эти значения не реализованы в Firefox, Chrome или Safari. Но всё хуже.

  • Когда Firefox сталкивается с round или space он заменяет значение на repeat.
  • Когда Chrome или Safari сталкивается с round или space он заменяет их на no-repeat. Кроме того, браузеры на Webkit, по всей видимости, понимают свойства, но не отображают их корректно.

Здорово. Спасибо, ребята.

Единственный способ добиться какого-то единства, это заставить Firefox отображать как Webkit.

#element {
  background-repeat: no-repeat;
  background-repeat: space;
}

Итак.

  • IE9 и Опера будут правильно повторять картинки по горизонтали и вертикали без обрезания или масштабирования изображения.
  • Firefox не понимает space, подставляет вместо него значение no-repeat и отображает единственную картинку.
  • Chrome и Safari понимают space, но ошибочно показывают единственную, без повторения картинку.

Неприятно. Будет лучше подождать несколько месяцев, пока Mozilla и Webkit включит полную поддержку background-repeat.


В CSS 2.1 свойство background-repeat имеет четыре значения: no-repeat, repeat, repeat-x и repeat-y. Хотя они, безусловно, полезны, но не позволяют полностью управлять процессом повторения и картинки будут обрезаны, если они не помещаются в контейнер точное число раз. CSS3 вводит два новых варианта: space и round. background-repeat: space Вариант space будет повторять картинки по горизонтали и вертикали без обрезания или изменения размера изображения: background-repeat: space; background-repeat: round Вариант round будет повторять картинки по горизонтали и вертикали без обрезания, но изображение может быть изменено: background-repeat: round;
Просмотров: 2 629
Комментариев: 0:   29-03-2016, 12:21
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle