背景图片边框

Question

是否有一种 CSS 属性可以在背景图像周围设置边框？我一直在寻找这个属性，但没有找到它。它是否存在，还是我只能手动绘制背景图像周围的线条？

- stdcerr

---

类似问题在这里 - tatlar

关于问题 - 不，没有CSS属性可以将边框设置为背景图像。 但是有一些解决方法。 - Raimonds

Answer 1

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

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

- user1280616

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

---

不错，我今天稍后会看一下。与此同时，我刚刚在我的图像周围放置了一个 div 并设置了我想要的边框... - stdcerr

我的答案更有意义，而且更加简洁 :) - Scott Bartell

这不会在图像周围设置边框（正如原始问题所要求的）。这会在<div>周围设置边框。这是您的[jsfiddle已修改以显示问题]（http://jsfiddle.net/WUHmw/82/）。 - tatlar

@tatlar 是的，目前需要你指定背景图片的高度和宽度。如果没有具体的实现细节，很难（甚至不可能）为此提供适用于所有情况的解决方案。不过，无论如何，我已经更新了我的答案，并提供了另一种在背景图片重复时可行的解决方案。 - Scott Bartell

这可能是一个老问题，但tatiar注意到了我注意到的...所提供的被接受的答案没有在背景图像周围设置边框，因此对其他读者来说是误导性的。它可能为OP提供了一个解决方案，但不应被认为是正确回答问题本身。 - aequalsb

Answer 3

这也可以使用 CSS 的投影效果 (drop-shadow) 实现。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow

    
 .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);
    }
 }

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

http://jsfiddle.net/wtesuqjz/

浏览器的支持并不完美。

- omer