我有一个包含正常和悬停状态的背景图像的 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;}
【问题讨论】：
标签： background-image
唯一的问题是“剪辑路径”、“蒙版”和“过滤器”（不是 IE "过滤器" 但 SVG "过滤器") 仅适用于 Firefox 和 Safari (是的 没有铬）。他们做的不同。 Firefox 需要一个 svg 剪辑路径 通过 id 指定，例如：
.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）并“隐藏”您想要隐藏的部分（但这不是一个非常优雅的解决方案）！
希望这会有所帮助！
【讨论】：