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

Anonim

В backgroundимота в CSS ви позволява да контролирате фона на всеки елемент (какво бои под съдържанието на този елемент). Това е стенографско свойство, което означава, че ви позволява да напишете това, което би било множество CSS свойства в едно. Като този:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background се състои от осем други свойства:

  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip
  • background-color

Можете да използвате всяка комбинация от тези свойства, която ви харесва, в почти всякакъв ред (въпреки че препоръчаният в спецификацията ред е по-горе). Има обаче проблем: всичко, което не посочите в backgroundсвойството, автоматично се задава по подразбиране. Така че, ако направите нещо подобно:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Фонът ще бъде прозрачен, вместо червен. Поправката обаче е лесна: просто дефинирайте background-colorслед backgroundили просто използвайте стенограмата (напр. background: url(… ) red;)

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

CSS3 добави поддръжка за множество фонове, които се наслагват един върху друг. Всяко свойство, свързано с фона, може да вземе списък, разделен със запетая, по следния начин:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Всяка стойност в списъка, разделен със запетая, съответства на слой: първата стойност е най-горният слой, втората стойност е вторият слой, а цветът на фона винаги е последният слой.

Рецепти

Вижте Pen emBzRd от Тимъти Милър (@tjacobdesign) на CodePen.

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

Поддръжката варира между различните специфични свойства и всяка съответна статия в Алманаха има уникални бележки за поддръжка на браузъра. Основните едноцветни фонове и единични изображения обаче работят навсякъде и всичко, което не се поддържа, просто се връща към следващото най-добро нещо, независимо дали това е изображение или цвят.

Chrome Сафари Firefox Опера IE Android iOS
Върши работа Върши работа Върши работа Върши работа Върши работа Върши работа Върши работа