0

我有这个 HTML。具有以下内容：

<div class="item">
  <div class="bg_img"></div>
  <h1>morning</h1>
  <h2>today</h2>
  <p>lorem ipsum.</p>
</div>

此内容 CSS 的背景图片：

#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}

这个结构工作正常。但我想将此背景图像附加到正文和全屏尺寸。如何通过 JavaScript 或纯 jQuery（无插件）做到这一点？

4

4 回答 4

1

试试下面的代码...

 #container .item .bg_img{
   background: url('/img/mainpage/demo.jpg') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
 }
于 2013-09-26T13:01:42.147 回答
0

您的意思是与身体上下文相关而不是.item 的图像吗？

您可以使用 position:fixed 。顶部、左侧、底部和右侧将确保它将占据整个页面。

背景大小：封面将确保图像本身将覆盖页面。根据您使用的图像，您可能需要其他解决方案。例如：您可以将图像居中并淡化为背景颜色（但这取决于您）

使用 -1 的 z-Index 以确保它不会遮挡您的内容

item .bg_img {
    background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

小提琴：http: //jsfiddle.net/Aa8fe/

于 2013-09-26T13:19:45.487 回答
0

使用这个 CSS：

background-size: cover;
于 2013-09-26T13:01:22.157 回答
-1

即使我为同样的努力而奋斗，最后我得到了一个解决方案..它在下面..

    body //your container name
    {
        background-image: url(Images/caramel%20gradient%20for%20website.png);
        background-size: 100%;
    }
于 2013-09-26T13:03:56.967 回答