Mengapa CSS Saya Tidak `kandungan: url()` Paparan Imej dalam Firefox?

Firefox Tidak Memaparkan Imej URL Kandungan

Dalam CSS, sifat kandungan membenarkan anda memasukkan kandungan ke dalam elemen, seperti imej . Ini boleh berguna untuk mencipta ikon tersuai atau elemen hiasan. Walau bagaimanapun, pengguna telah menghadapi isu di mana imej URL kandungan tidak dipaparkan dalam penyemak imbas Firefox.

Untuk menyelesaikan isu ini, adalah penting untuk memahami bahawa sifat kandungan berfungsi bersama-sama dengan unsur pseudo, seperti : :sebelum dan ::selepas. Dalam contoh yang disediakan:

.googlePic {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

Harta kandungan sedang digunakan pada kelas .googlePic secara langsung, yang mana ia tidak betul. Untuk menjadikannya berfungsi dalam Firefox, anda perlu menggunakan ::before pseudo-element. Berikut ialah kod yang diperbetulkan:

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

Dengan menggunakan unsur pseudo ::before, anda menambah kandungan imej sebelum kandungan sebenar unsur tersebut. Ini memastikan bahawa imej dipaparkan dengan betul dalam Firefox. Ingat, sifat kandungan hanya berfungsi dengan unsur pseudo.

Atas ialah kandungan terperinci Mengapa CSS Saya Tidak `kandungan: url()` Paparan Imej dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!