Question

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

Answer 1

这可以通过在div中添加图像来完成，而不是设置div的边框

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

Answer 2

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

示例1 - 固定大小

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

HTML

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

CSS

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

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

示例2 - 重复背景图像

如果背景图像重复，您可以执行以下操作：

HTML

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

CSS

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

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

Answer 3

这也可以使用css drop-shadow完成 https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

 <div class="box">
  <div class="bgImg"></div>
</div>

 .box {
     width:400px;
     height: 400px;
     display: flex;
     justify-content: center;
     align-items:center;
     border: 1px solid red;
       .bgImg{
        width: 300px;
        height: 300px;
        background: url('http://i.imgur.com/ikxbnvc.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        filter: drop-shadow(0 0 1px black);
    }
 }

http://jsfiddle.net/wtesuqjz/

浏览器支持不完美

背景图像边框

3 个答案:

示例1 - 固定大小

示例2 - 重复背景图像