Question

我有一个名为“ button.png”的图像，其宽度为167px，高度为90px。

我需要使用“ button.png”作为背景创建一个CSS类，但只显示从图像顶部到45px“中间”标记的位置。

我也想这样做，以便当此类悬停时，它显示从45px“中间”标记到底部的图像。

任何帮助将不胜感激。

谢谢。

Answer 1

您可以将背景剪辑到内容框并调整填充以控制其可见部分：

.box {
  width:200px;
  height:100px;
  border:2px solid;
  padding-bottom:50px;
  box-sizing:border-box;
  background: url(https://picsum.photos/id/0/200/100);
  background-clip:content-box;
  
  cursor:pointer;
  transition:1s all;
}
.box:hover {
   padding-bottom:0;
   padding-top:50px;
}

<div class="box">

</div>

或者，如果您希望图像覆盖按钮，则可以简单地调整background-position：

.box {
  width:200px;
  height:50px;
  border:2px solid;
  box-sizing:border-box;
  background: url(https://picsum.photos/id/0/200/100);
  background-position:top;
  
  cursor:pointer;
  transition:1s all;
}
.box:hover {;
  background-position:bottom;
}

<div class="box">

</div>

用px确定背景img高度

1 个答案: