Question

我有一个带有背景图像的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;}

Answer 1

唯一的问题是“剪辑路径”，“掩码”和“过滤器”（不是没有 IE“过滤器”但SVG“过滤器”仅适用于Firefox和Safari（是的没有Chrome）。他们以不同的方式做到了。 Firefox需要一个svg clippath 通过id指定，例如：
.box { clip-path: url("roundedrect.svg#cp1"); } 
虽然Safari刚刚使用形状本身从以下来创造clippath：
 .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/

Tokimon （来源：Showing only part of background image using CSS3）

否则，您所能做的就是将背景图像分开，或者将一个容器（div）放在它上面并“隐藏”您要隐藏的部分（但这不是一个非常优雅的解决方案）！ / p>

希望这有帮助！

隐藏背景图片的一部分

1 个答案: