javascript - 如何隐藏/覆盖 iframe 的特定部分

Question

我有这个 iframe:

<iframe width='828' 
        height='465' 
        frameborder='0' 
        allowfullscreen 
        src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>

并希望覆盖/移除 Angular 落中的 Firedrive Logo ，使其无法点击。我怎样才能做到这一点。我已经在网上搜索了几个小时，但似乎没有任何效果。

Jsfiddle:http://jsfiddle.net/aZ5p6/

注意:IFRAME 包含广告。 Logo 位于 iframe 的右上角。

我是 html 的新手，请不要简单地告诉我如何解决它，用勺子喂我代码。

Answer 1

您必须在 iframe 周围添加一个容器/包装器。试试这个:

CSS

.wrapper{
    position:relative;
    z-index: 1;
    display: inline-block;
}

.hidelogo{
    position: absolute;
    width: 150px;
    height: 40px;
    background: #222;
    right: 0px;
    bottom: 6px;
    z-index:999;
    display: block;
    color: #fff;
}

HTML

<div class="wrapper">
    <div class="hidelogo"></div>
    <iframe width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'></iframe>
</div>

DEMO HERE