Bagaimanakah saya boleh mengubah saiz dan menskalakan imej latar belakang dalam CSS?

Mengubah Saiz dan Menskala Imej Latar Belakang dalam CSS

Meregangkan dan menskalakan imej latar belakang agar sesuai dengan bekasnya ialah tugas biasa dalam pembangunan web. Dengan CSS, terdapat beberapa cara untuk mencapai kesan ini.

Harta bersaiz latar belakang CSS 3

Saiz latar belakang sifat CSS 3 menyediakan penyelesaian yang elegan untuk imej latar belakang penskalaan. Ia membolehkan anda menentukan lebar dan ketinggian latar belakang yang diingini, membolehkannya meregang atau berskala untuk mengisi bekasnya.

Contoh:

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

Kaedah ini disokong secara meluas oleh penyemak imbas moden sejak 2012.

Lain-lain Kaedah

Sebelum CSS 3, terdapat teknik lain yang digunakan untuk menskalakan imej latar belakang:

• Ulangan latar belakang CSS 2 dan kedudukan latar belakang: Menggunakan background-repeat: no-repeat dan melaraskan kedudukan latar belakang boleh mensimulasikan penskalaan, tetapi ia mempunyai pengehadan.
• pemalam jQuery: Pelbagai pemalam jQuery telah dibangunkan untuk menyediakan sokongan merentas pelayar untuk penskalaan latar belakang.

Walau bagaimanapun, sifat bersaiz latar belakang telah menjadi kaedah pilihan kerana kesederhanaan, prestasi dan keserasian penyemak imbasnya. Dengan menggunakan sifat ini, anda boleh meregangkan atau menskalakan imej latar belakang dengan mudah untuk meningkatkan daya tarikan visual halaman web anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengubah saiz dan menskalakan imej latar belakang dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!