Bagaimana untuk Menyembunyikan Teks dengan Berkesan Semasa Memaparkan Imej Menggunakan CSS?

Teks Halimunan Menggunakan CSS

Menyembunyikan elemen teks menggunakan CSS boleh berguna untuk pelbagai tujuan reka bentuk. Satu senario biasa ialah menggantikan teks dengan imej sebagai logo. Artikel ini menangani masalah khusus: cara mengalih keluar teks asal dengan berkesan semasa memaparkan imej.

Penyelesaian untuk Menyembunyikan Teks

Terdapat pelbagai pendekatan untuk menjadikan teks tidak kelihatan semasa mengekalkan dimensi elemen untuk peletakan imej.

Kaedah 1: Teks Lekukan

Satu teknik melibatkan menolak teks ke luar skrin menggunakan inden teks:

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 */
}

Kaedah 2: Menyembunyikan Teks

Penyelesaian lain mengelakkan kotak besar yang tidak kelihatan yang dicipta oleh negatif lekukan:

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;
}

Kedua-dua kaedah mencapai hasil yang diingini dengan sama ada menolak teks ke luar skrin atau menyembunyikannya dalam elemen.

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