Cara menggunakan unit CSS Viewport untuk melaksanakan imej latar belakang adaptif

Cara menggunakan unit CSS Viewport untuk melaksanakan imej latar belakang adaptif

Imej latar belakang memainkan peranan yang sangat penting dalam reka bentuk web dan boleh menambah keindahan dan daya tarikan pada halaman web. Walau bagaimanapun, melaksanakan imej latar belakang adaptif menjadi satu cabaran kerana peranti dan saiz skrin yang berbeza. Dalam artikel ini, kami akan menerangkan cara menggunakan unit CSS Viewport untuk melaksanakan imej latar belakang penyesuaian dan memberikan contoh kod khusus.

Unit Pandangan CSS ialah unit yang mentakrifkan panjang berbanding dengan dimensi tetingkap penyemak imbas (iaitu port pandangan). Terdapat dua unit Viewport yang biasa digunakan, vw dan vh. Antaranya, 1vw adalah sama dengan satu peratus lebar viewport, dan 1vh adalah sama dengan satu peratus ketinggian viewport. Di bawah kami akan menggunakan kedua-dua unit ini untuk melaksanakan imej latar belakang penyesuaian.

Pertama, kita perlu menyediakan imej latar belakang, yang boleh ditetapkan sebagai imej latar belakang halaman web menggunakan kod berikut:

body {
  background-image: url('background.jpg');
  background-size: cover;
}

Seterusnya, kami menggunakan unit vw untuk menetapkan lebar imej latar belakang. Sebagai contoh, jika kita mahukan lebar imej latar belakang untuk menduduki 50% daripada lebar ruang pandang, kita boleh menggunakan kod berikut:

body {
  background-image: url('background.jpg');
  background-size: 50vw;
  background-repeat: no-repeat;
  background-position: center;
}

Dengan menetapkan sifat saiz latar belakang kepada 50vw, lebar imej latar belakang akan melaraskan secara automatik mengikut lebar port pandangan Ini dicapai Kesan penyesuaian.

Begitu juga, kita boleh menggunakan unit vh untuk menetapkan ketinggian imej latar belakang. Sebagai contoh, jika kita mahu ketinggian imej latar belakang untuk menduduki 50% daripada ketinggian viewport, kita boleh menggunakan kod berikut:

body {
  background-image: url('background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}

Dengan menetapkan ketinggian: 100vh, ketinggian imej latar belakang akan melaraskan secara automatik mengikut ketinggian daripada viewport supaya ia memenuhi keseluruhan viewport.

Selain itu, kami juga boleh menggabungkan unit vw dan vh untuk menetapkan lebar dan ketinggian imej latar belakang pada masa yang sama untuk mencapai kesan penyesuaian yang lebih bebas. Sebagai contoh, jika kita mahu lebar dan tinggi imej latar belakang untuk menduduki 50% daripada ruang pandang, kita boleh menggunakan kod berikut:

body {
  background-image: url('background.jpg');
  background-size: 50vw 50vh;
  background-repeat: no-repeat;
  background-position: center;
}

Dengan menetapkan saiz latar belakang: 50vw 50vh, lebar dan tinggi imej latar belakang akan berdasarkan saiz port pandangan Pelarasan mencapai kesan penyesuaian yang lebih tepat.

Ringkasnya, menggunakan unit CSS Viewport untuk melaksanakan imej latar belakang adaptif adalah sangat mudah dan praktikal. Dengan menetapkan sifat bersaiz latar belakang kepada unit vw atau vh, kita boleh mencapai kesan penyesuaian pada imej latar belakang dengan mudah. Dengan menggunakan unit ini secara fleksibel, kami boleh menjadikan imej latar belakang dipaparkan dengan sempurna pada peranti dan saiz skrin yang berbeza, sekali gus meningkatkan pengalaman pengguna halaman web.

Semoga artikel ini bermanfaat dan saya doakan anda berjaya dalam melaksanakan imej latar belakang adaptif menggunakan unit CSS Viewport!

Atas ialah kandungan terperinci Cara menggunakan unit CSS Viewport untuk melaksanakan imej latar belakang adaptif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!