我有一个名为“ button.png”的图像,其宽度为167px,高度为90px.
我需要使用“ button.png”作为背景创建一个CSS类,但只显示从图像顶部到45px“中间”标记的位置.
我也想这样做,以便当此类悬停时,它显示从45px“中间”标记到底部的图像.
任何帮助,将不胜感激.
谢谢.
最佳答案
您可以将背景剪辑到内容框并调整填充以控制其可见部分：
原文链接：https://www.f2er.com/css/530714.html.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>