背景图片边框

Question

是否有一个 css 属性可以在背景图像周围设置边框？我一直在寻找它但没有找到它，它是否存在，或者我是否需要在我的背景图像周围手动画线？

原文由 stdcerr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这可以通过在 div 中添加图像然后设置 div 的边框来完成

<div style="border:1px solid red;float:left;">
   <div style="background:url("...");float:left;"></div>
<div>

原文由 NullPoiиteя 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果没有具体的实施细节，就很难（如果不是不可能的话）提供适用于所有情况的解决方案。以下是一些具有约束条件的解决方案：

示例 1 - 固定尺寸

如果你知道背景图像的高度和宽度，你可以这样做：

 div.bg {
  background-image: url('http://www.google.com/images/logo_sm.gif');
  border: 5px solid #000;
  width: 50px;
  height: 50px;
}

 <div class="bg"> </div>

工作示例：http: //jsfiddle.net/WUHmw/

示例 2 - 重复背景图像

如果背景图像重复，你可以这样做：

 div.bg {
  background: url('http://i.imgur.com/ikxbnvc.png') repeat;
  border: 5px solid #000;
  box-sizing: border-box;
  width: 100%;
  height: 200px;
}

 <div class="bg">
   <p>Here is some text to on top of the background image.</p>
</div>

工作示例：http: //jsfiddle.net/pLz52/

原文由 Scott Bartell 发布，翻译遵循 CC BY-SA 4.0 许可协议