html - 一个固定的背景图像，带有文本(并且也是响应式的)

标签 html css responsive-design background-attachment

我一直在尝试解决问题，但没有成功。我也一直在互联网上搜索可能的解决方案，但还是没有成功。

假设我希望用户在查看网站时向下滚动时将带有文本的图像固定在背景中，我该怎么做？ (也有响应)。

我已经尝试做很多事情，但是当调整窗口大小时，当我希望它留在背景图像中时，文本会超出背景图像的范围。

 html5
    ===========


           <body>
            <header id="head">
            <!--head content-->
            </header>
            <div class="fixedImage">
               <div class="welcome">
                   <h1>Welcome to this site</h1>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, enim eu posuere commodo, elit mauris condimentum sem.</p>
               </div>
            </div>
            </body>


        css
        ======
    #head{
       width:100%;
      background-color:#FFFFFF;
    }

    .fixedImage{
     background-attachment:url(img/random.jpg);
     background-size: 100%;
     background-repeat:no-repeat;
     background-attachment:fixed;

}

             .welcome{
                /*styling goes here*/
    }

我想做的一个 huuuuuuuge 例子是这样的:

http://www.nois3.it/

固定在顶部的图片，里面有文字，调整大小时文字不会溢出图片。

如果有人能帮我解决这个该死的问题，那就太棒了!

感谢您的宝贵时间!

最佳答案

在 CSS 中使用 div，position:absolute;

这里也解决了这个问题:

css - Floating div positioning

关于html - 一个固定的背景图像，带有文本(并且也是响应式的)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22852998/