Фон-повторение - CSS-трикове

Anonim

Ако background-imageе посочено свойство, background-repeatсвойството в CSS определя дали (и как) ще се повтори. Ето пример:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Това са възможните стойности за това свойство (освен обичайните неща като inherit):

  • repeat: плочка на изображението в двете посоки. Това е стойността по подразбиране.
  • repeat-x: плочка на изображението хоризонтално
  • repeat-y: плочка на изображението вертикално
  • no-repeat: не плочка, просто покажете изображението веднъж
  • space: плочка на изображението в двете посоки. Никога не изрязвайте изображението, освен ако едно изображение не е твърде голямо, за да се побере. Ако могат да се поберат множество изображения, раздалечете ги, като винаги докосвате краищата.
  • round: плочка на изображението в двете посоки. Никога не изрязвайте изображението, освен ако едно изображение не е твърде голямо, за да се побере. Ако няколко изображения могат да се поберат с остатъчно място, смачкайте ги или ги разтегнете, за да запълните пространството. Ако остава по-малко от половин ширина на изображението, разтегнете, ако е повече, разтегнете.

Съществува и синтаксисът на двете стойности:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Което прави синтаксисите с една стойност просто стенография за синтаксиса с две стойности. Например roundнаистина е round round.

Можете също така да разделяте със стойности множество стойности, ако имате работа с множество фонове.

Демонстрация

Вижте
фон-повторение на писалката от CSS-трикове (@ css-трикове)
на CodePen.

Интерактивна демонстрация за това как spaceи как roundработи в сравнение с repeat:

Вижте Pen
The Different `background-repeat`s от Chris Coyier (@chriscoyier)
на CodePen.

Друга демонстрация за преоразмеряване, показваща „фалшива“ граница:

Вижте
изображението на монтираната на писалка граница Лесният начин от ShopTalk Show (@shoptalkshow)
на CodePen.

Ето още една забавна демонстрация с демонстрация на хамбургери background-repeat: round;.

Свързани

  • фон-прикачен файл
  • фонов клип
  • Цвят на фона
  • фоново изображение
  • фон-произход
  • фон-позиция
  • размер на фона

Ресурси

  • CSS3 Spec
  • MDN

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
1+ 1+ 1+ 3,5+ 4+ 1+ 1+

Синтаксисът с множество стойности, разделен със запетая, се поддържа само във Firefox 3.6+ и IE 9+. Синтаксисът с две стойности за управление на хоризонтални и вертикални стойности, разделени, се поддържа само във Firefox 13+ и IE 9+. В roundи spaceключови думи са само Firefox 49+ и IE 9+.