Question

我的内容包含以下背景图片：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

Answer 1

试试这个：

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和{{1}定义border就不容易了}？如果像你一样拉伸图像，边框看起来并不那么好......

Answer 2

原因：

当您增加包含图像的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>

这是一个快照，其中broswer未能显示白线，因为该线的相对大小与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>

背景图像在每一面都可见

2 个答案: