每一面的背景图像都可见

Background-image on every side visible

我有以下背景图片,里面有内容:Image

我希望边框始终在每一侧都可见。

.itembox {
  background: url(http://wowimg.zamimg.com/images/wow/tooltip.png);
  font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: white;
  float: left;
  width: 60%;
  padding: 8px;

我试过这个:

    background-size: 100% 100%;
    background-repeat: no-repeat

试试这个:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

更新:

在你的 .itembox css 中,我只添加了这个:

background-size: 100% 100%;

(没有 background-repeat)这似乎对我有用。

不过我很好奇,如果你真的想使用那个特定的图像作为背景,那么只定义一个 background-color 和一个 border 和一个 [= 不是更容易吗? 16=]?如果像这样拉伸图像,边框看起来就不太好看了...

原因:

随着包含该图像的 div 尺寸的增大,您在图像周围看到的白线会变得越来越清晰。随着包含图像的 div 变小,您会注意到线条消失了,因为 最小测量单位

                               `1 pixel`

小于该值的任何内容都不会显示在浏览器中

这是您看到白线的快照

body{
  background:blue;
}
.itembox {
  background-image: url("http://wowimg.zamimg.com/images/wow/tooltip.png");
  font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: white;
  float: left;
  width: 500px;
  height:1000px;
  padding: 8px;
  background-repeat: no-repeat;
  background-size: cover;
  
   }
<div class="itembox">
Something<br>
Something<br>
Something<br>
Something<br>
</div>

这是一个快照,其中浏览器未能显示该白线,因为该线的相对大小与 div

的大小相比

body{
  background:blue;
}
.itembox {
  background-image: url("http://wowimg.zamimg.com/images/wow/tooltip.png");
  font-family: Verdana,"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: white;
  float: left;
  width: 50px;
  height:100px;
  padding: 8px;
  background-repeat: no-repeat;
  background-size: cover;
  
   }
<div class="itembox">
Something<br>
Something<br>
Something<br>
Something<br>
</div>