百分比宽度和高度隐藏背景图像

Question

Demo

  .moving_background
  {
    background-image: url("../image/quote3.jpg");
    background-position: 50% center; /*Centering property*/
    background-repeat: no-repeat;
    height: 100px;
    margin: 20px;
    width: 100px;
    border:1px solid;
   }

如果我将宽度和高度更改为 100%，它不会向我显示边框。我不明白原因。 请告诉我

我正在尝试将此 div 置于正文中。除了负的 top、left、margin 值之外，也欢迎任何其他方式。

有什么想法吗？

Answer 1

问题是background-image 不计入您的div 中的内容，所以您拥有的是一个空的div，因此它没有高度。解决此问题的一种方法是将图像添加到 div 中，然后将其隐藏。

HTML

<div class="moving_background">
    <image src="http://placehold.it/100x100" class="background"/>
</div>

CSS

.moving_background {
    background-image: url("http://placehold.it/100x100");
    background-position: 50% center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    margin: 20px;
    width: 100%;
    border:1px solid;
}

.background {
    visibility: hidden
}

JSFiddle：http://jsfiddle.net/nhg33xek/4/