CSS-用px确定背景img高度

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

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

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

任何帮助,将不胜感激.

谢谢.

最佳答案

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

.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>

或者,如果您希望图像覆盖按钮,则可以简单地调整背景位置：

.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>