Варианты повторения фоновой картинки в CSS3 - «CSS3» » Новости мира Интернет
Первая за 11 лет новая книга Анджея Сапковского из цикла «Ведьмак» получила название «Перекрёсток воронов» — первые подробности - «Новости сети»
Первая за 11 лет новая книга Анджея Сапковского из цикла «Ведьмак» получила название «Перекрёсток воронов» — первые подробности - «Новости сети»
Роскомнадзор с декабря начнёт блокировать сайты за публикацию научной информации о VPN - «Новости сети»
Роскомнадзор с декабря начнёт блокировать сайты за публикацию научной информации о VPN - «Новости сети»
Миллионер с зарплатой сантехника: выяснилось, сколько зарабатывает глава OpenAI - «Новости сети»
Миллионер с зарплатой сантехника: выяснилось, сколько зарабатывает глава OpenAI - «Новости сети»
SpaceX рассказала, почему затопила ракету Super Heavy во время последнего запуска Starship - «Новости сети»
SpaceX рассказала, почему затопила ракету Super Heavy во время последнего запуска Starship - «Новости сети»
Представлена технология охлаждения чипов светом — секретная и только по предварительной записи - «Новости сети»
Представлена технология охлаждения чипов светом — секретная и только по предварительной записи - «Новости сети»
Google намерена превратить ChromeOS в Android - «Новости сети»
Google намерена превратить ChromeOS в Android - «Новости сети»
Пользователи iPhone 16 стали слышать чужие голоса из динамиков - «Новости сети»
Пользователи iPhone 16 стали слышать чужие голоса из динамиков - «Новости сети»
Samsung придумала, как сделать смартфоны тоньше — представлена перископическая камера ISOCELL ALoP - «Новости сети»
Samsung придумала, как сделать смартфоны тоньше — представлена перископическая камера ISOCELL ALoP - «Новости сети»
Nike выпустила кроссовки, почти полностью напечатанные на 3D-принтере - «Новости сети»
Nike выпустила кроссовки, почти полностью напечатанные на 3D-принтере - «Новости сети»
Китайские производители памяти захватывают рынок, предлагая DDR4 за полцены - «Новости сети»
Китайские производители памяти захватывают рынок, предлагая DDR4 за полцены - «Новости сети»
Новости мира Интернет » Самоучитель CSS » CSS3 » Варианты повторения фоновой картинки в CSS3 - «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; .; Предположим, у нас есть фоновое изображение шириной 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.

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

А что там на главной? )))



Комментарии )))