用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並裁剪出您需要的精靈並將其保存爲單獨的圖像文件。