固定的背景图片,带有文字(也有响应)

时间:2014-04-04 03:29:55

标签: css html5 css3 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/

固定在顶部的图像,其中包含文字,并且在调整大小时不会从图像中倒出。

如果有人能帮我解决这个问题,那就太棒了!

谢谢你的时间!

1 个答案:

答案 0 :(得分:0)

使用带有CSS的div,position:absolute;

这里也回答了这个问题:

css - Floating div positioning