用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并裁剪出您需要的精灵并将其保存为单独的图像文件。