Фонове зображення - 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

У наведеному вище прикладі використовується лише один градієнт, але ви також можете накладати кілька градієнтів один на одного. Є кілька досить дивовижних візерунків, які ви можете створити за допомогою цієї техніки.

Встановлення запасного кольору

Якщо фонове зображення не вдається завантажити, або ваш градієнтний фон переглядається у браузері, який не підтримує градієнти, браузер буде шукати колір фону як резервний. Ви можете вказати свій запасний колір так:

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+