css - 使用 CSS 裁剪和平铺背景图像

Question

我有一个 CSS 精灵图像，footer1.png. 我想使用 CSS 裁剪图像的一部分，然后将图像平铺作为我.headimg3元素的背景。

我正在尝试使用clipandbackground属性来实现这一点，但图像没有被裁剪。

.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

CSSclip属性需要有一个positionofabsolute才能正常工作。

.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 属性和演示

注意：
您不能使用任何精灵图像的一部分并重复该部分，因为
background-repeat它适用于整个图像。

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