Варианты повторения фоновой картинки в CSS3 - «CSS3» » Новости мира Интернет
«Момент, которого вы так долго ждали»: создатели Pioner открыли запись на закрытую «бету», но зарегистрироваться не так уж и просто - «Новости сети»
«Момент, которого вы так долго ждали»: создатели Pioner открыли запись на закрытую «бету», но зарегистрироваться не так уж и просто - «Новости сети»
Соцсеть X обновила принцип блокировки пользователей — многим это не понравилось - «Новости сети»
Соцсеть X обновила принцип блокировки пользователей — многим это не понравилось - «Новости сети»
Обновлённый PC Manager очистит диск от мусора с помощью нового алгоритма и не только - «Новости сети»
Обновлённый PC Manager очистит диск от мусора с помощью нового алгоритма и не только - «Новости сети»
На фоне надвигающегося сиквела продажи Kingdom Come: Deliverance взяли новую высоту - «Новости сети»
На фоне надвигающегося сиквела продажи Kingdom Come: Deliverance взяли новую высоту - «Новости сети»
Дебютировал электрический кроссовер Zeekr X 2025 — автономность на 420 км и 268 л.с. всего за $21 050 - «Новости сети»
Дебютировал электрический кроссовер Zeekr X 2025 — автономность на 420 км и 268 л.с. всего за $21 050 - «Новости сети»
Теперь клиники могут отвечать на отзывы пользователей о врачах — «Блог для вебмастеров»
Теперь клиники могут отвечать на отзывы пользователей о врачах — «Блог для вебмастеров»
Создан порошок с рекордным уровнем поглощения CO2 из воздуха - «Новости сети»
Создан порошок с рекордным уровнем поглощения CO2 из воздуха - «Новости сети»
Криптовалюты упали после сообщения о расследовании возможных нарушений при использовании Tether - «Новости сети»
Криптовалюты упали после сообщения о расследовании возможных нарушений при использовании Tether - «Новости сети»
Обнаружена уязвимость Windows, позволяющая откатывать обновления безопасности - «Новости сети»
Обнаружена уязвимость Windows, позволяющая откатывать обновления безопасности - «Новости сети»
Тайным получателем чипов TSMC для Huawei оказалась компания, связанная с китайской Bitmain - «Новости сети»
Тайным получателем чипов TSMC для Huawei оказалась компания, связанная с китайской Bitmain - «Новости сети»
Новости мира Интернет » Самоучитель 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.

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

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



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