Rumah > hujung hadapan web > tutorial css > Mengapa CSS Saya Tidak `kandungan: url()` Paparan Imej dalam Firefox?

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

Patricia Arquette
Lepaskan: 2024-11-29 07:16:10
asal
593 orang telah melayarinya

Why Doesn't My CSS `content: url()` Image Display in 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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan