div 只有边框

Question

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

下面是一个例子：

现在我有一个问题：如果我将鼠标放在图像上，我只会将焦点放在带有边框的div上（例如，如果我想右键单击并保存 img）但是div是空的（使用仅用于边框）我如何忽略div的中心部分？

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

在这个 jsfiddle 中，维度不对。 （我用js代码放置边框）

img = $('<div style="position:absolute; width: ' + ($(this) .outerWidth(true) +  
    leagueBorders[templeague].width) + 'px; height: ' + ($(this) .outerHeight(true) +  
    leagueBorders[templeague].height) + 'px; max-width: none; top: '+  
    ($(this).position().top + leagueBorders[templeague].top) +'px; left: '+  
    ($(this).position().left + leagueBorders[templeague].left) +'px;"  
    class="'+leagueBorders[templeague].classe+'"></div>');`  

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

Answer 1

您需要修复 HTML 标签并使用 CSS 来完成所有图形工作。 确保img标签在div ，然后使用以下 CSS。 看这里的图片

 .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 规则应用于该容器，以便您的边框适合。

Answer 3

处理边框时使用 CSS，如下所示：

border-size:2px;
border-style:solid;
border-color:black;