html - 背景图片边框

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/

浏览器支持不完善