Question

如何使用背景图像制作div。我试过了：

＆＃13;

.mainFoto{
          width:100%;
          height:100%;
          background: url("http://www.vsttp.hekko24.pl/images/logo2.png") no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          
}

＆＃13;

<div class="row mainFoto">
</div>

＆＃13;

这是一个好方法吗？如何显示？

Answer 1

非常接近！只需要设置

html, body {
    height: 100%;
}

正确显示。在这里更新了小提琴：http://jsfiddle.net/9zygg1gt/2/

设置height: 100%时，它需要与其他内容相关。添加这个小块可以使它相对于它具有100％的高度。

Answer 2

不要将div高度与％一起使用（请尝试使用px）。宽度可以使用％，但高度将无法按预期工作。

Answer 3

我在main()上使用了您的代码并将x添加到div const demo

Answer 4

您需要添加position:fixed。

＆＃13;

  .mainFoto{
          width:100%;
          height:100%;
          background: url("http://www.vsttp.hekko24.pl/images/logo2.png") no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          position: fixed;
          
}

＆＃13;

  <div class="mainFoto">
    
  </div>

＆＃13;

div没有带背景图像的文本

4 个答案: