CSS `content: url()` 画像が Firefox に表示されないのはなぜですか?

Firefox でコンテンツ URL 画像が表示されない

CSS では、content プロパティを使用して、画像などの要素にコンテンツを挿入できます。 。これは、カスタム アイコンや装飾要素を作成する場合に便利です。ただし、コンテンツ URL 画像が Firefox ブラウザに表示されないという問題が発生しています。

この問題を解決するには、content プロパティが次のような疑似要素と連携して機能することを理解することが重要です。 ：前後。提供された例では:

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

content プロパティは .googlePic クラスに直接適用されていますが、これは正しくありません。 Firefox で動作させるには、::before 疑似要素を使用する必要があります。修正されたコードは次のとおりです。

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

::before 疑似要素を使用すると、要素の実際のコンテンツの前に画像コンテンツを追加します。これにより、Firefox で画像が正しく表示されるようになります。 content プロパティは擬似要素でのみ機能することに注意してください。

以上がCSS `content: url()` 画像が Firefox に表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。