Фоново изображение - CSS-трикове

Anonim

В background-imageимота в CSS прилага графично (например PNG, SVG, JPG.webp, GIF, WebP) или градиент на заден план на елемент.

Има два различни типа изображения, които можете да включите с CSS: обикновени изображения и градиенти.

Изображения

Използването на изображение на фон е доста просто:

body ( background: url(sweettexture.jpg.webp); )

На url()стойност ви позволява да въведете пътя файл към всяко изображение, и тя ще се появи като фон за този елемент.

Можете също да зададете URI за данни за url(). Това изглежда така:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

Тази техника премахва една HTTP заявка, което е добре. Но има редица недостатъци, така че преди да започнете да подменяте всички свои изображения, не забравяйте да вземете предвид всички плюсове и минуси на URI данни.

Можете също да използвате background-imageза спрайт изображения, което е друг полезен метод за намаляване на HTTP заявките.

Градиенти

Друга възможност при използване на фонове е да кажете на браузъра да създаде градиент. Ето супер прост пример за линеен градиент:

body ( background: linear-gradient(black, white); )

Можете също да използвате радиални градиенти:

body ( background: radial-gradient(circle, black, white); )

Технически погледнато, градиентите са просто друга форма на фоново изображение. Разликата е, че браузърът прави изображението вместо вас. Ето как да ги напишете: CSS3 Gradient Syntax

Примерът по-горе използва само един градиент, но можете също да слоите множество градиенти един върху друг. Има някои доста невероятни модели, които можете да създадете, използвайки тази техника.

Задаване на резервен цвят

Ако фоновото изображение не успее да се зареди или вашият градиен фон се преглежда в браузър, който не поддържа градиенти, браузърът ще търси цвят на фона като резервен. Можете да посочите своя резервен цвят по следния начин:

body ( background: url(sweettexture.jpg.webp) blue; )

Множество фонови изображения

Можете да използвате множество изображения или комбинация от изображения и градиенти за вашия фон. Множество фонови изображения са добре поддържани сега (всички съвременни браузъри и IE9 + за графични изображения, IE10 + за градиенти).

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

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

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

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

Няма ограничение за това колко фонови изображения можете да зададете и можете да правите страхотни неща като да анимирате фоновите си изображения. В блога на Дейвид Уолш има добър пример за множество фонови изображения с анимация.

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

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

Свързани

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

Още ресурси

  • Спецификацията CSS3
  • MDN
  • Перфектни фонови изображения на цялата страница
  • Овладяване на CSS градиенти (Slidedeck)

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

Редовните изображения работят навсякъде, а множество изображения работят в съвременните браузъри и IE9 +. Ето поддръжката за градиенти:

Chrome Сафари Firefox Опера IE Android iOS
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+