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

注意：
你不能使用任何精灵图像的一部分并重复该部分，因为<{1}}用于 整个图像 。

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

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

1 个答案: