Question

我真的没有任何参考，也没有示例代码（在Google＆amp; SO中搜索）。
也许只是找不到合适的关键词。

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

那说：
我想“ 裁剪 ” iframe 的多个像素。
首先是顶部和底部，但是，嘿，如果我要问，左右也是：o）

[更新]
我真的是一个“概念证明”或者至少是一个起始代码......

[概念证明，根据David的回答]

<!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>

Answer 1

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

编辑：刚尝试过，我发现（呃！）这会禁用与iframe的所有互动，因为裁剪叠加层会“吸收”所有事件。如果对你没事的话，那很好。如果没有，您可以尝试CSS属性pointer-events:none;，但这不适用于所有浏览器。它适用于最新版本的Firefox，Chrome和IE，但不是每个人都使用最新版本的所有内容。

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

将iframe放在“相框”后面，或者如何“框架”iframe

1 个答案: