Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Meregangkan atau Mengskalakan Imej Latar Belakang CSS untuk Mengisi Bekasnya?

Bagaimanakah Saya Boleh Meregangkan atau Mengskalakan Imej Latar Belakang CSS untuk Mengisi Bekasnya?

Barbara Streisand
Barbara Streisandasal
2024-12-27 02:01:19338semak imbas

How Can I Stretch or Scale a CSS Background Image to Fill Its Container?

Regangan dan Penskalaan Latar Belakang CSS

Dalam reka bentuk web, anda mungkin menghadapi keperluan untuk mempunyai imej latar belakang yang memenuhi bekasnya, sama ada anda mahu ia meregang atau berskala agar sesuai dengan sempurna. Mari kita mendalami cara untuk mencapai ini menggunakan CSS.

Adakah terdapat cara untuk mendapatkan latar belakang dalam CSS untuk meregangkan atau menskalakan untuk mengisi bekasnya?

Ya, ada ialah cara yang mudah dan berkesan untuk meregangkan atau menskalakan latar belakang CSS agar sesuai dengan bekasnya. Ini boleh dicapai menggunakan sifat CSS 3 yang dikenali sebagai saiz latar belakang.

Cara Meregangkan atau Mengskala Latar Belakang CSS:

Untuk meregangkan atau menskalakan latar belakang CSS, gunakan langkah berikut:

  1. Tentukan sifat saiz latar belakang: Sifat ini mengambil dua nilai, menyatakan lebar dan ketinggian imej latar belakang.
  2. Tetapkan nilai: Anda boleh menggunakan peratusan (%), piksel (px) atau mana-mana unit sah lain untuk menentukan saiz imej latar belakang yang dikehendaki.
  3. Gunakan pada bekas: Gunakan sifat bersaiz latar belakang pada elemen bekas yang akan memegang imej latar belakang.

Untuk contoh:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Dalam contoh ini, imej latar belakang akan diregangkan secara mendatar (100%) agar sesuai dengan lebar bekas dan skala menegak (auto) untuk mengekalkan nisbah bidangnya.

Teknik ini telah disokong oleh penyemak imbas moden sejak 2012, menjadikannya penyelesaian yang tersedia secara meluas untuk mengawal penampilan latar belakang dalam reka bentuk web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meregangkan atau Mengskalakan Imej Latar Belakang CSS untuk Mengisi Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn