Bagaimana untuk menggantikan imej css

Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat teknologi Internet, semakin banyak perhatian telah diberikan kepada estetika halaman laman web. Sebagai elemen reka bentuk yang penting dalam reka bentuk laman web, gambar memainkan peranan yang tidak boleh ditukar ganti. Walau bagaimanapun, dalam proses pembangunan harian, menukar imej dengan sewajarnya boleh melaraskan gaya halaman web dengan lebih baik. Penggantian imej CSS, sebagai salah satu cara teknikal yang penting, telah diketahui secara beransur-ansur oleh pembangun web.

1. Apakah penggantian imej CSS?

Sebelum memperkenalkan penggantian imej CSS, kita perlu memahami beberapa konsep asas tentang sifat terkira CSS dan sifat paparan. Atribut yang dikira boleh difahami secara ringkas sebagai penyemak imbas menghuraikan helaian gaya dan mengira nilai atribut akhir yang dijana, termasuk tetapi tidak terhad kepada saiz teks, warna, gaya fon dan elemen lain. Atribut paparan ialah gaya halaman yang dipaparkan terakhir.

Prinsip penggantian imej CSS adalah untuk menggantikan alamat imej asal dalam peringkat pengiraan atribut untuk mencapai kesan menukar imej halaman. Secara amnya, kami menggunakan teg dalam kod HTML untuk memasukkan imej, dan kemudian menggantikannya melalui atribut latar belakang CSS atau atribut kandungan.

2. Tiga cara untuk melaksanakan penggantian imej CSS

1 Gunakan atribut latar belakang untuk penggantian imej

Ini ialah kaedah yang paling biasa digunakan. Perlu diingat bahawa dalam kaedah ini, anda perlu memberi perhatian kepada masalah lalu lintas untuk meminta imej. Kerana kaedah permintaan imej latar belakang ialah permintaan GET (iaitu, meminta pelayan memuat turun sumber), dan permintaan ini dilakukan bersama-sama dengan kod HTML dan JS.

(1) Gantikan imej melalui atribut latar belakang dalam fail CSS

Kod sampel:

.demo{
    width: 200px;
    height: 150px;
    background: url('./images/demo.png') no-repeat center center / contain;
}

Dalam contoh ini, kami menetapkan imej latar belakang kepada demo. png , dan tetapkan pemusatan, lebar dan ketinggian penyesuaiannya.
(2) Gantikan imej melalui gaya sebaris dalam HTML

Kod contoh:

<div style="width: 200px; height: 150px; background: url(&#39;./images/demo.png&#39;) no-repeat center center / contain;"></div>

2 Gunakan atribut kandungan untuk menggantikan imej

kandungan Atribut boleh digunakan untuk menetapkan elemen pseudo, digabungkan dengan kelas pseudo seperti :before atau :after, untuk menggantikan imej melalui atribut kandungan. Kaedah ini digunakan secara meluas dan bukan sahaja boleh menggantikan gambar, tetapi juga menghasilkan kesan yang lebih praktikal.

Kod sampel:

.demo:before{
    content: "";
    display: block;
    width: 200px;
    height: 150px;
    background: url('./images/demo.png') no-repeat center center / contain;
}

Dalam contoh ini, kami menggunakan elemen pseudo :before untuk menjana elemen alternatif dengan lebar dan ketinggian 200px*150px, imej latar belakang demo .png dan paparan berpusat.

3. Gunakan galeri sprite SVG untuk menggantikan

Galeri sprite SVG ialah cara teknikal yang serupa dengan galeri sprite CSS. Ia mula-mula menggabungkan berbilang imej SVG, dan memilih kedudukan tetingkap imej yang diingini melalui sifat imej latar belakang dan kedudukan latar belakang CSS untuk mencapai kesan penggantian imej.

Kod contoh:

.demo{
    width: 100px;
    height: 100px;
    background-image: url('./images/smile-icon.svg');
    background-position: -20px -10px;
}

Dalam contoh ini, kami merujuk kepada pustaka sprite SVG bernama ikon senyuman dan mengeluarkan paparan imej yang diperlukan melalui sifat kedudukan latar belakang kedudukan.

3. Analisis kelebihan dan kekurangan penggantian imej CSS

Untuk teknologi penggantian imej CSS, kelebihan dan kekurangannya adalah jelas.

Kelebihan:

1. Fleksibiliti tinggi

Teknologi penggantian imej CSS boleh mengawal saiz dan kedudukan imej halaman secara fleksibel untuk memenuhi keperluan gaya reka bentuk halaman yang berbeza.

2. Kurangkan permintaan pelayan

Melalui penggantian imej CSS, kami boleh memuat turun elemen imej yang diperlukan sekaligus melalui helaian gaya CSS, dengan itu mengurangkan permintaan pelayan.

3. Meningkatkan kelajuan halaman

Melalui kaedah di atas, bilangan permintaan boleh dikurangkan dan masa memuatkan halaman dapat dikurangkan, sekali gus meningkatkan kelajuan halaman.

Kelemahan:

1. Kesan pada SEO

Untuk enjin carian, apabila pelawat mencari kandungan, mereka tidak boleh mendapatkan maklumat tentang imej halaman. Oleh kerana enjin carian tidak boleh membaca maklumat imej dalam gaya CSS, teknologi ini tidak boleh digunakan pada sesetengah tapak web yang memerlukan SEO.

2. Tidak mesra pengguna istimewa

Bagi pelawat yang berharap pelawat boleh melumpuhkan gaya CSS atau menggunakan pembaca skrin untuk membaca halaman web, penggantian imej CSS akan menghalang pengalaman mereka.

4. Ringkasan

Teknologi penggantian imej CSS merupakan bahagian yang sangat penting dalam pembangunan web, ia boleh mengoptimumkan kesan paparan imej halaman dengan berkesan. Melalui kaedah yang diperkenalkan dalam artikel ini, kita boleh menguasai kemahiran penggantian imej CSS dengan mudah, supaya dapat mencapai kesan halaman yang kita inginkan dengan lebih mudah.

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