CSS `content` 속성을 사용할 때 Firefox에 내 이미지가 표시되지 않는 이유는 무엇입니까?

Firefox 브라우저 이미지 표시 문제

CSS 클래스 내에서 이미지를 표시하려고 할 때 콘텐츠 속성이 활용되었습니다.

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

이 접근 방식은 Google Chrome 및 Safari에서 이미지를 렌더링하는 데 효과적인 것으로 입증되었지만 Firefox에서는 예상치 못한 문제가 발생했습니다. 이미지가 실패했습니다.

해결 방법:

문제는 주로 ::before 및 ::after 의사 요소와 호환되는 Firefox의 콘텐츠 속성 구현에 있습니다. . 상황을 해결하기 위해 CSS 코드를 다음과 같이 수정할 수 있습니다.

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
}

:before 의사 요소를 활용하면 Firefox에서도 이미지를 성공적으로 표시할 수 있습니다. 콘텐츠 속성의 사용법에 대한 자세한 내용은 제공된 문서 링크를 참조하세요.

http://www.htmldog.com/reference/cssproperties/content/

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