imej gantian css

Dalam penghasilan halaman web, gambar merupakan bahagian yang sangat penting, dan apabila menggunakan CSS untuk reka bentuk gaya halaman web, ia selalunya melibatkan penggantian beberapa gambar. Artikel ini akan memperkenalkan kaedah dan teknik menggantikan imej dalam CSS.

1. Atribut imej latar belakang

Dalam CSS, anda boleh menggunakan atribut imej latar belakang untuk menentukan imej latar belakang Kaedah khusus adalah menggunakan pernyataan berikut dalam peraturan CSS:

background-image: url("images/bg.jpg");

Alamat imej dalam petikan dalam url() ialah laluan imej yang akan diganti. Perlu diingatkan bahawa laluan di sini adalah relatif kepada fail HTML itu sendiri Jika laluan relatif digunakan untuk memperkenalkan fail CSS dalam HTML, laluan imej dalam fail CSS juga harus berdasarkan laluan relatif kepada fail HTML.

2. Elemen pseudo: sebelum dan :selepas

Dalam CSS, elemen pseudo merujuk kepada mencipta elemen maya yang tidak wujud dalam pepohon dokumen melalui gaya CSS. Apabila menggunakan elemen pseudo, anda boleh mengendalikannya seperti elemen biasa, seperti menetapkan saiz, latar belakang dan atribut lain.

Apabila menggantikan gambar, anda boleh menggunakan elemen pseudo untuk menambah elemen tambahan untuk mencapai kesan menambah gambar. Kaedah khusus adalah seperti berikut:

.selector:before {
    content: url("images/xxx.png");
}

Dalam pernyataan di atas, .selector bermaksud menggantikan pemilih elemen imej, dan :before bermaksud menggunakan elemen pseudo: sebelum. Dalam atribut kandungan, anda boleh menentukan laluan imej untuk diganti.

Perlu diambil perhatian bahawa apabila menggunakan :before atau :after, anda perlu menetapkan atribut kandungan untuknya, jika tidak, elemen itu tidak akan dipaparkan.

3. data-URI

Selain menggunakan fail imej luaran untuk penggantian, CSS juga menyediakan kaedah data-URI untuk membenamkan imej secara langsung ke dalam fail CSS dalam bentuk pengekodan Base64 ini mencapai kesan yang serupa dengan unsur pseudo.

Kaedah khusus adalah untuk menukar imej kepada pengekodan Base64 dan merujuknya sebagai parameter url() dalam gaya CSS. Contohnya:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAboAAAAeCAYAAABx68HMAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goJ
CwohK6HlJQAAAN9JREFUKM+1kktugjAQxV/YRlLCTURzR91i9CGdqutj6zzDJj0moR9k6dpig7Oy4Bw+W0VNF/czNMcxqiX/wV9FzPE2DzjHyy/jVpefCvzXdCBN9+7Z
TDDNwqsOo +x +8/gqgGJr2HmJ4+kX9C0pvgCv3teUPpEWoFJpALyxqsdmFedW2++krT / JWbXEWddLqEBWLt + 8DfMvqNFL/QFSjufVYrk5Dr/tFNSSUZLTELPVdQAAAABJRU5ErkJggg==);

Kelebihan kaedah ini ialah ia boleh mengurangkan permintaan HTTP, sekali gus meningkatkan kelajuan pemuatan halaman web. Walau bagaimanapun, perlu diingatkan bahawa pengekodan Base64 akan menyebabkan kandungan imej menjadi lebih besar, yang akan menyebabkan kelajuan memuatkan halaman berkurangan apabila menggunakan imej besar, jadi anda perlu membuat pilihan berdasarkan situasi tertentu.

Ringkasnya, menggantikan imej ialah keperluan reka bentuk gaya biasa dalam penghasilan halaman web dan CSS menyediakan pelbagai cara untuk mencapai keperluan ini. Ia adalah perlu untuk memilih kaedah yang sesuai mengikut situasi sebenar, untuk menjadikan kesan halaman lebih cemerlang.

Atas ialah kandungan terperinci imej gantian css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!