Cara menggunakan saiz latar belakang dan kedudukan latar belakang CSS

menguasai kemahiran saiz dan kedudukan imej latar belakang CSS untuk membuat susun atur responsif dengan mudah! Artikel ini akan meneroka sifat background-size dan background-position secara mendalam untuk membantu anda mengawal saiz dan kedudukan imej latar belakang.

mata teras:

Atribut

• digunakan untuk menyesuaikan saiz imej latar belakang, menyokong kata kunci seperti background-size dan cover, serta unit berangka seperti piksel, em, dan peratusan. contain Atribut
• mengawal kedudukan imej latar belakang dalam bekas, dan berfungsi dengan baik dengan background-position. background-size: cover
• Anda boleh menggunakan kata kunci (atas, bawah, kiri, kanan, pusat), nilai panjang (PX, EM) atau nilai peratusan untuk mencapai kedudukan imej yang tepat. background-position Gabungan
• dan background-size sangat sesuai untuk susun atur responsif untuk menangani perubahan saiz kontena. background-position

Latihan praktikal:

Kami akan menggunakan gambar OIA, Santorini (400px x 600px) untuk demonstrasi.

Dalam contoh kami, 300px x 200px

berpusat.

Mempunyai latar belakang kuning, imej latar belakang berada di atas latar belakang kuning. <div> <code><div> Jika anda menambah imej latar secara langsung, hanya sebahagian daripada imej yang akan dipaparkan kerana saiz imej lebih besar daripada . <p> <code><div> <s> Atribut </s><p> <img src="https://img.php.cn/upload/article/000/000/000/173906287235522.jpg" alt="How to Use CSS background-size and background-position "> akan membantu kita menyelesaikan masalah ini. </p> <p> <code>background-size Gunakan

Tetapkan Saiz Latar Belakang:

Atribut background-size menyediakan dua kata kunci

dan

, serta unit berangka (px, em, %) dan background-size. cover contain auto

: Imej dipaparkan sepenuhnya, tetapi tidak dapat diisi dengan bekas.

• background-size: contain;

: Imej itu penuh dengan bekas, tetapi beberapa imej mungkin dipotong.

• background-size: cover;

  Nilai lain: Gunakan peratusan atau nilai piksel untuk menetapkan saiz imej, tetapi berhati -hati untuk mengelakkan ubah bentuk imej.

• Gunakan
Tetapkan kedudukan imej latar belakang:

Secara lalai, sudut kiri atas imej latar belakang terletak di sudut kiri atas bekas. Atribut background-position membolehkan kita mengawal kedudukan imej dengan tepat.

• Kata kunci: Gunakan kombinasi kata kunci dan kedudukan menggunakan top, bottom, left, right dan kata kunci lain. center

• Nilai panjang: Gunakan piksel, EM dan nilai panjang lain untuk menyempurnakan kedudukan imej.

• Nilai peratus: Gunakan nilai peratusan ke kedudukan, anda perlu memahami hubungan berkadarnya berbanding dengan bekas.

  

Ringkasan:

dan background-size sifat adalah alat yang kuat dalam CSS, terutamanya berguna apabila membuat susun atur responsif. Penggunaan fleksibel kedua -dua atribut ini dapat dengan mudah mencapai pelbagai kesan imej latar belakang. background-position

Untuk maklumat lanjut, sila rujuk dokumentasi MDN:

dan background-size. Di samping itu, adalah disyorkan untuk mempelajari sifat background-position dan object-fit, yang juga sesuai untuk imej sebaris. object-position

FAQs:

Bagaimana untuk mencari imej latar belakang ke sudut kanan bawah halaman? Gunakan
• . background-position: bottom right;
Bolehkah imej latar belakang diposisikan menggunakan peratusan? Ya,
• menerima nilai peratusan. background-position
bagaimana membuat imej latar belakang menutup seluruh elemen? Gunakan
• . background-size: cover; Perbezaan antara
• dan background-size: cover;? background-size: contain; Isi bekas, cover penuh paparan penuh. contain
Adakah CSS menyokong pelbagai imej latar belakang? Disokong, dipisahkan oleh koma.

Saya harap artikel ini dapat membantu anda memahami dan menggunakan saiz imej latar belakang CSS dan sifat kedudukan!