Firefox에서 내 CSS `content: url()` 이미지가 표시되지 않는 이유는 무엇입니까?

Firefox가 콘텐츠 URL 이미지를 표시하지 않습니다

CSS에서 콘텐츠 속성을 사용하면 이미지와 같은 요소에 콘텐츠를 삽입할 수 있습니다. . 이는 사용자 정의 아이콘이나 장식 요소를 만드는 데 유용할 수 있습니다. 그러나 콘텐츠 URL 이미지가 Firefox 브라우저에 표시되지 않는 문제가 사용자에게 발생했습니다.

이 문제를 해결하려면 콘텐츠 속성이 다음과 같은 의사 요소와 함께 작동한다는 점을 이해하는 것이 중요합니다. :이전과 ::이후. 제공된 예에서는

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

콘텐츠 속성이 .googlePic 클래스에 직접 적용되고 있는데 이는 올바르지 않습니다. Firefox에서 작동하게 하려면 ::before 의사 요소를 사용해야 합니다. 수정된 코드는 다음과 같습니다.

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

:before 의사 요소를 사용하면 요소의 실제 콘텐츠 앞에 이미지 콘텐츠를 추가하게 됩니다. 이렇게 하면 이미지가 Firefox에서 올바르게 표시됩니다. 콘텐츠 속성은 의사 요소에서만 작동한다는 점을 기억하세요.

위 내용은 Firefox에서 내 CSS `content: url()` 이미지가 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!