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

Question

演示版

  .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居中放置。 除负的上，左，边距值以外，任何其他方式也都可以使用。

任何想法？

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/