Question

我在另一个div上做了一个div来创建一个边框。

Here就是一个例子：

现在我遇到了一个问题：如果我将鼠标放在图像上，我只能将焦点放在div上，只有边框（例如，如果我想要右击并保存img），那么{{ 1}}一直是空的（仅用于边框）我如何忽略div的中心部分？

我使用了div，因为我将边框放在图像/其他内容上，并且使用原始边框无法获得相同的结果（放置在图像外部，我从边框获得一个空白区域和图像）。

在this jsfiddle中尺寸不正确。（我用js代码放置边框）

div

但你可以很容易地看到问题所在。如果右键单击图像，则会获得空白空间的右键菜单，而不是图像选项如果我是带有滚动条的文本（而不是图像），我就无法使用滚动条。

Answer 1

您需要修复HTML标记并使用CSS执行所有图形工作。确保img标记位于div内，然后使用以下CSS。 SEE PICTURE HERE

       .rank-Platino {
        overflow: hidden;
        border: 15px solid transparent;
        border-image-slice: 95 80 95 80;
       border-image-width: 50px 50px 50px 50px;
        border-image-outset: 0px 0px 0px 0px;
        border-image-repeat: stretch stretch;
        border-image-source: url("https://dl.dropboxusercontent.com/u/30396291/LOL/border/plat-border.png");
        margin:6px;
    }

<a class="avatar">
    <div style="position:absolute; width: 90px; max-width: none; top: 0px; left: 0px" class="rank-Platino rank-border"><img height=163 width=90 class="user_summoner_icon PLATINUM rank-border" src="http://www.mobafire.com/images/champion/skins/portrait/rammus-full-metal.jpg"></div>
    </a>

Answer 2

div只是因为你没有看到任何内容而不是空虚。 div可以有透明的内容，但这并不意味着ti是空的。它就像一个透明层。这就是为什么它需要关注的原因。您应该使用css边框属性来使边框适合图像。或者，您应该将图像包装在容器（div）中，并将特定的css规则应用于此容器，以便适合您的边框。

div只有边框

2 个答案: