2012-02-14 31 views
0

如何显示只有一部分(在这种情况下是隐藏水印)的图像像9gag.com, 我试图在CSS中使用剪辑,但它要求形象是绝对的位置,这对我来说是一个不行。如何显示图像的一部分像9gag.com

是否有其他方式的CSS做到这一点? js也可以。

谢谢。

////////////////////////////////////////////// // 这里是解决我的问题,我花了一段时间才能找出我可以用一个容限属性,我傻

img {margin:0 auto -33px;} 
+1

为什么你不能使用'position:absolute'?如果你将它包装在'position:relative'容器中,它对于该容器是绝对的。 – ThiefMaster 2012-02-14 19:00:54

+0

我做了你的建议,它打破了页面。 – user1099029 2012-02-14 19:19:42

+0

请将您的解决方案作为下面的实际答案发布。 – BoltClock 2012-02-15 05:13:04

回答

2

是,使用CSS overflow属性。您可以执行overflow: hidden;来剪出超出容器宽度和高度的实体。

你可以在W3schools了解更多:http://www.w3schools.com/cssref/pr_pos_overflow.asp 他们甚至有一个例子让你尝试。

+0

我的网站类似于9GAG,包含图像后的很多,每天多增加,所以容器都将有不同的高度和宽度,所以这不会在我的情况 – user1099029 2012-02-14 19:06:31

+0

很好地工作,你可以写,检测单个图像的脚本'高度和宽度,对吧?然后计算要掩盖多少“溢出:隐藏”的权利? – dangerChihuahua007 2012-02-14 19:15:10

+0

好吧,我想从每个图像的底部向上移动100px。我试图避免使用额外的脚本,因为它会给服务器增加压力,我的只有大约60 MB的可用内存 – user1099029 2012-02-14 19:26:10

0

你只需要CSS这一点。您将使用许多网站上使用的相同技术来减少HTTP资源请求(称为精灵)。

您创建一个div,设置图像作为背景图像。然后,您可以设置div的所需高度和宽度。如果您不想仅剪切右下角,则可以调整background-position CSS属性。

为一个例子见​​。

+0

是的,我知道如何使用精灵,但我的网站类似于9gag,包含很多图像后,更多每日添加,我不能在这种情况下使用精灵。 – user1099029 2012-02-14 19:05:30

+0

我不是说使用精灵。我说你会用同样的技术来覆盖图像的一部分。 – 2012-02-16 12:14:35