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 回答