CSS로 배경 이미지 자르기 및 타일링

Question

CSS 스프라이트 이미지 footer1.png이 있습니다. CSS를 사용하여 이미지의 한 부분을 자른 다음 이미지를 내 .headimg3 요소의 배경으로 바둑판 식으로 배열하고 싶습니다.

이 작업을 수행하려면 clip 및 background 속성을 사용하려고하지만 이미지는 잘리지 않습니다.

.headimg3 { 
    background: url(footer1.png) bottom; 
    background-position: -35px -358px; 
    background-repeat: repeat; 
    height:34px; 
    overflow: hidden; 
    clip: rect(0px, 200px, 0px, 400px); 
} 
.headimgp { 
    padding: 8px 0px 0px 10px; 
    text-shadow: 2px 1px #fff; 
} 

<div class="headimg3"> 
    <div class="headimgp"> 
    &nbsp; LATEST Updates 
    </div> 
</div> 

어떻게 난 단지 CSS를 사용하여 배경 이미지를 자르고 타일 할 수 있습니까?

Answer 1

CSS clip 속성은 올바르게 작동하려면 position이 absolute이어야합니다.

.headimg3{ 
    background:url(footer1.png) bottom; 
    background-position: -35px -358px; 
    background-repeat: repeat; 
    height: 34px; 
    overflow: hidden; 
    position: absolute; 
    clip: rect(0px, 200px, 0px, 400px); 
} 

참조 :CSS Clip Property and Demo

참고 :
당신은 어떤 스프라이트 이미지의 섹션을 사용하고
background-repeat이 전체 이미지 때문에 그 부분을 반복 할 수 없습니다 .

이 경우 image editor을 사용하고 필요한 스프라이트를 자르고 별도의 이미지 파일로 저장하십시오.