CSS 의사 요소로 이미지 크기를 조정할 수 있나요?

CSS 의사 요소(:before/:after)에서 이미지 높이 수정이 가능합니까?

외관을 사용자 정의하려는 노력의 일환 특정 파일 형식의 경우 개발자는 이미지를 장식 요소로 통합할 수 있습니다. 와 같은 링크에 클래스를 할당하면 CSS를 활용하여 나중에 이미지를 표시할 수 있습니다.

.pdflink:after { content: url('/images/pdf.png') }

이 접근 방식은 링크에 이미지를 효과적으로 추가하는 반면 , 링크 텍스트를 기반으로 이미지 크기를 조정하는 것이 어려워집니다. 의사 요소 내에서 이미지 크기를 조정하는 기능은 웹 개발에서 오랫동안 제기된 문제였습니다.

배경 이미지 크기를 조정하는 전통적인 방법은 의사 요소에 적용할 수 없습니다. 그러나 이미지 크기 조정에 대한 일부 지원은 배경 크기 속성을 통해 달성할 수 있습니다.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

이 접근 방식에는 주변 블록의 너비와 높이를 명시적으로 정의하는 동시에 배경 크기를 조정하는 작업이 포함됩니다. 이 기술에는 호환성이 제한되어 있다는 점에 유의하는 것이 중요합니다. MDN 호환성 표는 브라우저 지원에 대한 자세한 내용을 제공합니다.

위 내용은 CSS 의사 요소로 이미지 크기를 조정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!