使用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剪辑属性和演示

注意:
您不能使用任何精灵图像的一部分并重复该部分,因为它
background-repeat是针对整个图像的.

在这种情况下,使用图像编辑器并裁剪出您需要的精灵,并将其另存为单独的图像文件.