使用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裁剪并平铺背景图像？

- PHP

Answer 1

CSS的clip属性需要具有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，因为它只适用于整个图像。

在这种情况下，请使用图像编辑器裁剪出所需的雪碧图部分并将其保存为单独的图像文件。

- arttronics