我有一个包含正常和悬停状态的背景图像的 div，因此当您将鼠标悬停时，会显示背景图像的下半部分。我正在制作同一个网站的移动版本，我希望只显示图像的前半部分，因为同一个 div 的高度会增加。但是，就目前而言，当 div 增长时，我显然会看到背景图像的后半部分。关于如何隐藏背景图像的下半部分同时仍显示顶部的任何想法？
.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block; float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}
唯一的问题是“剪辑路径”、“掩码”和“过滤器”（不是 IE“过滤器”而是 SVG“过滤器”）仅适用于 Firefox 和 Safari（是的，没有 Chrome）。他们做的不同。Firefox 需要通过 id 指定的 svg 剪辑路径，例如：
.box { clip-path: url("roundedrect.svg#cp1"); }而 Safari 仅使用形状本身从以下位置创建剪辑路径：
.box { clip-path: url("roundedrect.svg"); }我还没有找到在 Opera 和 Chrome 中执行此操作的方法。
但是对于 FF 和 Safari“跨浏览器”示例，我创建了这个： http ://tokimon.dk/testing/css-svg-test.html 。
否则，也许你可以从 CSS 3 中的背景操作中得到一些东西：http ://www.css3.info/preview/
否则，您所能做的就是分离背景图像，或者在其上放置一个具有纯色背景的容器（div）并“隐藏”您想要隐藏的部分（但这不是一个非常优雅的解决方案）！
希望这可以帮助！