Beberapa kaedah dan idea untuk bertukar perkataan dengan gambar_Pertukaran pengalaman

Hari ini, seorang rakan menghadapi masalah semasa membuat halaman web: dia mahu mengekalkan latar belakang pautan, tetapi juga mahu teks dalam pautan hilang! Tetapi selepas bekerja untuk masa yang lama, saya masih tidak dapat menyingkirkan teks ini. Saya rasa ramai rakan yang belajar standard telah menghadapi masalah ini Di sini saya akan menulis beberapa kaedah yang biasa digunakan dan menerangkan idea-idea, dengan harapan dapat membantu rakan-rakan yang baru mula belajar.

"Ganti gambar dengan perkataan" bermaksud menggantikan ungkapan teks dengan gambar. Kita semua tahu bahawa perwakilan teks dalam penyemak imbas adalah sangat buruk. Ia bergerigi, tidak boleh dibulatkan dan tidak boleh mempunyai banyak kesan. Dalam keadaan biasa, bahagian kandungan halaman web tidak perlu dilaksanakan, tetapi dalam piawaian WEB, ini selalunya diperlukan untuk logo dan tajuk. Jika kita menggunakan jadual untuk melakukannya, kita hanya menyiarkan gambar di suatu tempat Kaedah ini agak mudah, tetapi ia tidak kondusif untuk mencari. Jadi kita perlu melakukannya dengan cara yang standard untuk memastikan halaman web berada dalam keadaan baik dan kondusif untuk carian. Biasanya dipaparkan seperti yang ditunjukkan dalam rajah

: (display:none;) Ini bukan sahaja membuatkan kandungan bekas hilang tetapi juga bekas itu sendiri. Oleh itu, kita mesti membuat bekas lain di dalam bekas untuk memastikan latar belakang dalam bekas boleh dipaparkan seperti biasa selepas bahagian dalam hilang. Contoh:

Salin kod Kod adalah seperti berikut:

Kandungan tajuk

#logo {display:none; background:URL; width:300px; height:100px;}

Jika ia ditulis seperti ini, anda tidak akan melihat apa-apa langsung. Jadi apakah cara yang betul untuk menulisnya? Lihat contoh:

Salin kod Kod adalah seperti berikut:

Kandungan tajuk

#logo {background:URL; width:300px;}#logo span {display:none;}

Sila perhatikan kod di atas , latar belakang ditakrifkan di bawah #logo dan #logo span tidak mempunyai gaya kecuali paparan:tiada;. Oleh kerana bekas dengan atribut display:none; tidak akan melihat apa-apa, adalah sia-sia untuk menentukan gaya lain. Masih ada masalah dengan ini sahaja Ini adalah contoh tanpa pautan Jadi apa yang perlu kita lakukan apabila ada pautan? Mari lihat contoh lain:

Salin kod Kodnya adalah seperti berikut:

Kandungan tajuk

#logo {background:URL width:300px; logo a {display:none;}

Bolehkah anda meneka apa yang boleh dipaparkan oleh kod ini? Hakikatnya ialah latar belakang dipaparkan, tetapi pautannya hilang. Seperti yang kami katakan di atas: bekas itu sendiri yang diberikan atribut display:none juga akan hilang. Kemudian kita tahu dengan jelas bahawa kita mesti menambah bekas pada tag A ini. Mari kita lihat contoh sekali lagi:

Salin kod Kodnya adalah seperti berikut:

< div id="logo ">Kandungan tajuk

#logo {background:URL; width:300px; height:100px;}#logo a span {display:none;}

Adakah ini betul? Masih tidak berfungsi, mengapa? Kita semua tahu bahawa A bukan teg peringkat blok, yang bermaksud bahawa ketinggian dan lebar A ditentukan oleh kandungan Sekarang kandungan telah hilang, atribut ketinggian dan lebar tidak akan wujud lagi , jadi pautan akan menjadi Ia telah menjadi pautan tanpa zon panas. Ia mungkin tidak dinyalakan. Kita perlu mengubah suai kod di atas sekali lagi.

Salin kod Kod adalah seperti berikut:

Kandungan tajuk

#logo a {background:URL width:300px; 100px; display:block;}#logo sejengkal {display:none;}

Notez que l'attribut de la balise A ici doit être ajouté avec display:block; pour le forcer à être un élément de niveau bloc. De cette façon, la balise A devient une forme de lien d'une largeur de 300 et d'une hauteur de 100, avec un arrière-plan et aucun contenu textuel. Tout le monde a vu qu'une balise span a été ajoutée à la balise A ci-dessus, ce qui semble un peu redondant. L'effet peut-il être obtenu sans durée ? Oui, mais l'idée est différente, c'est la méthode de changement de position suivante.

Mouvement de position : c'est-à-dire que le contenu est déplacé hors de la zone d'affichage. Regardons le code pour comprendre cette méthode.

Copier le code Le code est le suivant :

Contenu du titre

#logo a {largeur:300px; hauteur:100px; {background :URL; padding:100px 0 0; display:block;}

En CSS, #logo et A ont un débordement caché (overflow:hidden;), ce qui signifie que si la taille dépasse 300*100, il sera être caché. Nous voyons que A est défini avec un remplissage : 100px 0 0; Ce remplissage supérieur pousse simplement le contenu en dehors de la zone d'affichage. Alors pourquoi #logo utilise-t-il également overflow:hidden;? Parce qu'il y aura un petit bug sous IE, le contenu de A ne peut pas déborder et se cacher, il est donc nécessaire d'ajouter un overflow:hidden sur la balise parent

Les éléments ci-dessus ne sont que deux de mes plus couramment utilisés ; Il existe bien entendu d’autres méthodes, dont chacune présente ses propres inconvénients, mais les différentes méthodes sont également complémentaires les unes des autres. Vous pouvez choisir de l'utiliser en fonction de la situation lors de votre candidature.