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放在体内。除了负顶部，左侧，边距值之外，还欢迎任何其他方式。

有什么想法吗？

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/

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

1 个答案: