只有边框的 div答案

【问题标题】：div with only border只有边框的 div
【发布时间】：2014-09-08 02:50:42
【问题描述】：

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

Here 是一个例子：

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

我使用了div，因为我将边框放在图像/其他东西上，使用原始边框无法获得相同的结果（放置在图像之外，我从边框和图片）。

在this 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>');`

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

【问题讨论】：

这个标题是什么意思？
请发布您的 HTML。
在jsfiddle中重现

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：