Bagaimana untuk mengelakkan paparan berulang imej dalam HTML

Dalam reka bentuk web, kita selalunya perlu memaparkan berbilang gambar pada halaman, tetapi kadangkala kita perlu menghalang gambar ini daripada dipaparkan berulang kali. Dalam kes ini, kita boleh menggunakan beberapa atribut dan teknik HTML untuk mencapai ini. Artikel ini akan memperkenalkan cara untuk mengelakkan paparan berulang imej dalam HTML.

1. Gunakan atribut latar belakang CSS

Dalam HTML, kita boleh menggunakan gaya CSS untuk menetapkan imej latar belakang elemen. Dan gunakan atribut ulangan latar belakang untuk mengawal cara imej latar belakang berulang. Jika ditetapkan kepada tidak berulang, kesan imej latar belakang tidak berulang boleh dicapai.

Sebagai contoh, gaya CSS berikut boleh menetapkan imej latar belakang elemen div kepada "myimage.jpg" dan tidak memaparkannya berulang kali:

div {
background-image: url ( myimage.jpg);
background-repeat: no-repeat;
}

2 Gunakan atribut onerror tag img HTML

Dalam HTML, kita boleh menggunakan. tag img untuk Tunjukkan gambar. Kadangkala, kita mungkin menghadapi situasi di mana imej tidak wujud atau tidak boleh dimuatkan. Pada masa ini, kita boleh menggunakan atribut onerror untuk menetapkan alamat imej ganti bagi memastikan imej halaman tidak berulang.

Sebagai contoh, teg img berikut boleh menghalakan "image.jpg" yang salah kepada imej sandaran "backup.jpg":

3 Gunakan JavaScript untuk melaksanakan

Jika kita memerlukan logik yang lebih kompleks pada masa hadapan, HTML dan CSS tidak akan dapat untuk memenuhi keperluan kita. Pada masa ini, kami boleh menggunakan JavaScript untuk memuatkan dan memaparkan imej secara dinamik untuk mencapai paparan tidak berulang yang lebih fleksibel.

Sebagai contoh, kod JavaScript berikut mula-mula mencipta tatasusunan yang mengandungi semua alamat imej yang perlu dipaparkan. Ia kemudian menggelung melalui tatasusunan, memilih alamat imej setiap kali, dan membandingkannya dengan tatasusunan alamat imej yang telah dipaparkan untuk memastikan tiada pendua. Akhir sekali, alamat imej yang dipilih ditambahkan pada tatasusunan imej yang dipaparkan, dan imej dimuatkan dan dipaparkan.

var imgArray = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
var displayedImgs = [];

function displayImgRandomly() {
lakukan {

var imgIndex = Math.floor(Math.random() * imgArray.length);
var imgSrc = imgArray[imgIndex];

} sambil (displayedImgs.indexOf(imgSrc) !== -1);

displayedImgs.push (imgSrc);
var imgElement = document.createElement('img');
imgElement.src = imgSrc;
document.body.appendChild(imgElement);
}

Ketiga-tiga kaedah di atas adalah cara yang mudah dan berkesan untuk mencapai paparan imej yang tidak berulang. Pelaksanaan khusus bergantung kepada keperluan dan keadaan sebenar kita. Dengan menggunakan atribut HTML dan CSS asas, atribut onerror tag img, dan kefungsian fleksibel JavaScript, kami boleh mencapai kesan paparan imej tidak berulang yang cekap dan cantik, sekali gus menambah daya tarikan visual dan minat pada reka bentuk web.

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan paparan berulang imej dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!