Latar belakang-gambar - Trik CSS

Anonim

The background-imageharta di CSS digunakan grafik (contohnya PNG, SVG, JPG.webp, GIF, webp) atau kecerunan untuk latar belakang unsur.

Terdapat dua jenis gambar yang boleh anda sertakan dengan CSS: gambar dan kecerunan biasa.

Gambar

Menggunakan gambar pada latar belakang sangat mudah:

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

Yang url()nilai membolehkan anda untuk memberikan laluan fail kepada mana-mana imej, dan ia akan muncul sebagai latar belakang untuk elemen yang.

Anda juga boleh menetapkan URI data untuk url(). Nampaknya seperti ini:

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

Teknik ini membuang satu permintaan HTTP, yang merupakan perkara yang baik. Tetapi, terdapat beberapa kelemahan, jadi sebelum anda mula mengganti semua gambar anda, pastikan anda mempertimbangkan semua kebaikan dan keburukan URI Data.

Anda juga dapat menggunakan background-imagegambar sprite, yang merupakan kaedah lain yang berguna untuk mengurangkan permintaan HTTP.

Kecerunan

Pilihan lain ketika menggunakan latar belakang adalah memberitahu penyemak imbas untuk membuat kecerunan. Berikut adalah contoh sederhana kecerunan linear:

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

Anda juga boleh menggunakan kecerunan radial:

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

Secara teknikal, kecerunan hanyalah bentuk gambar latar yang lain. Perbezaannya ialah penyemak imbas membuat gambar untuk anda. Inilah cara untuk menulisnya: CSS3 Gradient Syntax

Contoh di atas hanya menggunakan satu kecerunan, tetapi anda juga boleh melapiskan pelbagai kecerunan di atas satu sama lain. Terdapat beberapa corak yang sangat menakjubkan yang boleh anda buat menggunakan teknik ini.

Menetapkan Warna Fallback

Sekiranya gambar latar tidak dimuat, atau latar belakang kecerunan anda dilihat pada penyemak imbas yang tidak menyokong kecerunan, penyemak imbas akan mencari warna latar sebagai pengganti. Anda boleh menentukan warna fallback anda seperti ini:

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

Pelbagai Gambar Latar Belakang

Anda boleh menggunakan beberapa gambar, atau campuran gambar dan kecerunan, untuk latar belakang anda. Pelbagai gambar latar belakang disokong dengan baik sekarang (semua penyemak imbas moden dan IE9 + untuk gambar grafik, IE10 + untuk kecerunan).

Apabila anda menggunakan beberapa gambar latar, perhatikan bahawa terdapat susunan susunan yang agak bertentangan. Senaraikan gambar yang seharusnya berada di bahagian depan terlebih dahulu, dan gambar yang sepatutnya berada di bahagian belakang terakhir, seperti ini:

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

Apabila anda menggunakan beberapa gambar latar, anda sering perlu menetapkan lebih banyak nilai untuk latar belakang agar semuanya berada di tempat yang betul. Sekiranya anda ingin menggunakan backgroundsingkatan, anda boleh menetapkan nilai untuk setiap gambar secara individu. Ringkas anda akan kelihatan seperti ini (perhatikan koma yang memisahkan gambar pertama dan nilainya dari gambar kedua dan nilainya):

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

Tidak ada batasan untuk berapa banyak gambar latar yang dapat anda tetapkan, dan anda boleh melakukan perkara menarik seperti menghidupkan gambar latar anda. Terdapat banyak contoh gambar latar belakang dengan animasi di blog David Walsh.

Demo

Lihat gambar latar Pen dengan CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • latar belakang-lampiran
  • latar-klip
  • warna latar belakang
  • latar-asal
  • latar belakang-kedudukan
  • latar belakang-ulangan
  • ukuran latar belakang

Lebih Banyak Sumber

  • Spesifikasi CSS3
  • MDN
  • Imej Latar Belakang Halaman Penuh yang Sempurna
  • Menguasai Gradien CSS (Slidingeck)

Sokongan Penyemak Imbas

Imej biasa berfungsi di mana sahaja, dan banyak gambar berfungsi di penyemak imbas moden dan IE9 +. Inilah sokongan untuk kecerunan:

Chrome Safari Firefox Opera IE Android iOS
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+