HTML과 CSS를 사용하여 이미지의 일부만 표시하려면 어떻게 해야 합니까?

HTML/CSS에서 이미지의 일부만 표시

웹 개발 시, 이미지를 유지하면서 이미지의 특정 부분만 표시 CSS를 사용하여 무결성을 달성할 수 있습니다.

CSS 클립 사용 속성

질문에서 언급했듯이 CSS에는 클립 속성이 있습니다. 그러나 잘리는 요소를 절대적으로 배치해야 하므로 유연성이 제한됩니다.

.container {
  position: relative;
}

#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

이 예에서 ID가 "clip"인 이미지는 원본 250x250픽셀 이미지의 중앙 50x50픽셀 부분만 표시합니다. .

참고: 클립 속성은 다음 구문을 사용합니다: ret(top, right, 하단, 왼쪽). 이 경우 위쪽 및 왼쪽 값에 0, 오른쪽 값에 100px, 아래쪽 값에 200px를 지정했습니다.

CSS url() 참조 사용

CSS url() 참조의 경우 현재 이미지의 일부만 표시하는 기본 제공 방법이 없습니다.

위 내용은 HTML과 CSS를 사용하여 이미지의 일부만 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!