Bagaimana Saya Boleh Menggantikan Teks HTML dengan Imej Menggunakan CSS?

Menggantikan Teks HTML dengan Imej Menggunakan CSS

Dalam HTML, adalah perkara biasa untuk menggunakan tag untuk membuat tajuk dan memaparkan teks dalam web muka surat. Walau bagaimanapun, terdapat senario di mana anda mungkin mahu menggantikan teks dengan imej. Artikel ini menangani cabaran ini dengan meneroka dua penyelesaian CSS yang berkesan untuk menyembunyikan teks dan sebaliknya memaparkan imej.

Penyelesaian 1: Menolak Teks Luar Skrin

Kaedah ini melibatkan inden teks pada jarak yang ketara dari skrin, dengan berkesan menjadikannya tidak kelihatan kepada pengguna. Pada masa yang sama, imej latar belakang digunakan pada teg untuk memaparkan imej yang dikehendaki.

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Penyelesaian 2: Menyembunyikan Teks dengan Limpahan

Pendekatan ini menggunakan gabungan inden teks, kawalan ruang putih dan limpahan untuk menyembunyikan teks.

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Dengan melaksanakan salah satu daripada penyelesaian ini, anda boleh menyembunyikan teks dengan berkesan dalam teg HTML dan sebaliknya memaparkan imej yang diingini.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menggantikan Teks HTML dengan Imej Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!