CSS에서 이미지를 분할하는 방법

CSS로 사진을 분할하는 방법: 1. 배경 이미지 및 배경 위치 속성을 사용하여 사진을 분할합니다. 2. 클립 속성을 사용하여 "clip:ect(y1,y2,x2, x1);"을 설정합니다. 스타일을 사용하여 이미지를 분할합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

시나리오: 페이지에 작은 img 아이콘이 있는 경우 브라우저에 액세스할 때 이미지 로드로 인해 탐색 속도가 느려집니다. 이때 작은 아이콘을 이렇게 많이 모아서 하나의 img로 통합하면 이미지 하나에만 접근하면 됩니다. 이미지 요청 수를 줄일 수 있습니다

Integrated img

이제 통합 img를 사용할 수 있게 되었는데, 사용 중에 원하는 픽셀 범위를 어떻게 얻을 수 있을까요? 참조 주소는 위에 적혀 있습니다. 그냥 다시 할게요.

방법 1

요소의 배경:배경 색상 || 배경 이미지 || 배경 반복 || 배경 부착 || 배경 위치 투명 URL( 123.jpg) 반복 없음 스크롤 -140px -20px;

투명함은 투명도를 의미하고 색상이 없음을 의미합니다.

url(123.jpg)은 배경 이미지를 의미합니다.

반복 없음은 그림이 반복되지 않음을 의미합니다

스크롤은 배경 이미지를

-140px로 탐색할 수 있음을 의미합니다. 이는 가로 위치가 그림의 -140px에 있음을 의미합니다(그림의 왼쪽 상단 모서리는 0,0입니다).

-20px는 세로 위치가 -20px에 있음을 의미합니다.

하지만 위의 내용은 내가 원하는 것과 적합하지 않다는 것을 알았습니다.

위 효과를 보면 사진의 오른쪽 하단만 표시될 수 있습니다. 그런 다음 두 번째 방법을 시도해 보세요

방법 2

img의 클립 속성에 ret를 사용합니다.clip:ect(y1,y2,x2,x1) 매개 변수 설명은 다음과 같습니다

y1 = y 좌표 위치(세로 방향)

y2 = 위치결정 y좌표의 끝점(세로방향)

x1 = 위치결정 x좌표의 시작점(세로방향)

x2 = 위치결정 x좌표의 끝점(세로방향)

참고: 좌표의 시작점은 왼쪽 상단에 있습니다

코드는 다음과 같습니다.

    img{
        position:absolute;
        clip:rect(20px ,100px , 50px , 20px);
}

실제 작업 중에 두 가지 문제가 발견되었습니다. 1. ret 메서드에 쉼표를 포함해야 합니다. , 2. 위치가 포함되어야 하며, 절대 위치 지정, 즉 절대 또는 고정 속성이어야 합니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 CSS에서 이미지를 분할하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!