Bagaimanakah Saya Boleh Menyembunyikan Teks dengan Berkesan dalam HTML Menggunakan CSS Semasa Memaparkan Imej?

Sembunyikan Teks Menggunakan CSS

Dalam HTML, tag boleh digayakan menggunakan CSS untuk menggantikan teksnya dengan imej. Walau bagaimanapun, teks asal mungkin masih boleh dilihat dalam ruang teg yang diperuntukkan.

Untuk menangani perkara ini, satu teknik ialah menolak teks ke luar skrin. Ini boleh dicapai dengan sifat CSS berikut:

text-indent: -9999px;

Ini menghantar teks jauh ke kiri, menjadikannya tidak kelihatan. Selain itu, untuk memaparkan imej, tetapkan sifat imej latar belakang dan tentukan URLnya. Jangan lupa untuk menentukan ketinggian dan lebar elemen untuk menampung imej.

background-image: url(/the_img.png);
height: 100px;
width: 600px;

Kaedah alternatif ialah menyembunyikan teks sambil mengelakkan penciptaan ruang luar skrin yang besar:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Dengan menetapkan inden teks kepada 100%, teks dialihkan secara berkesan ke kanan dengan lebarnya sendiri, menjadikannya tidak kelihatan. white-space: nowrap menghalang teks daripada dibalut ke baris seterusnya dan melimpah: klip tersembunyi sebarang kandungan berlebihan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan Teks dengan Berkesan dalam HTML Menggunakan CSS Semasa Memaparkan Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!