0

我真的没有任何参考,也没有示例代码(在 Google 和 SO 中搜索)
也许只是没有找到正确的关键字。

我相信这可以/必须用 CSS 解决,但我的技能很少......

也就是说:
我想“裁剪” iframe的多个像素。
一开始是顶部和底部,但是,嘿,如果我要问的话,左右也是 :o)


[更新]
我真正想要的是一个“概念证明”,或者至少是一个可以玩的起始代码......


[根据大卫的回答,概念得到证明]

<!DOCTYPE html>
<html>
<head><title>iframe cropping</title>
    <style type="text/css">
    <!-- 
    #iframeparent{width:700px;height:700px;}
    iframe{margin-top:-40px;width:700px;height:700px;overflow:hidden;border:0px;}
    #iframe-crop{position:absolute;top:0;left:0;border-top:55px solid white;width:710px;height:640px;pointer-events:none;}
    -->
    </style> 
</head>
<body>
    <div id="iframeparent">
        <iframe src="http://docs.google.com/viewer?url=http://www.startupgreece.gov.gr/sites/default/files/geek_agreement_v1.2.pdf"></iframe>
        <div id="iframe-crop"></div>
    </div>
</body>
</html>
4

1 回答 1

1

我会直接在 iframe 顶部放置一个带有白色(或任何网站背景颜色)边框的块,并根据您要裁剪的数量调整每个边框的大小。最简单的方法是将 iframe 放在相对定位的父元素中(或者不是静态的,无论如何),然后将带有裁剪边框的块也放在该父元素内,绝对定位在top: 0and left: 0。裁剪块必须与 iframe 的大小相同(您的 iframe 是否有专用的大小?)。

编辑:刚刚尝试过,我发现(呃!)这会禁用与 iframe 的所有交互性,因为裁剪覆盖“吸收”所有事件。如果这对你来说很好,那很好。如果没有,您可以尝试 CSS 属性pointer-events:none;,但这不适用于所有浏览器。它适用于最新版本的 Firefox、Chrome 和 IE,但并不是每个人都使用最新版本的一切。

演示: http ://www.dstrout.net/pub/iframe-crop.htm

于 2012-05-14T01:13:16.987 回答