如何在水平滑动的网页上保持相同的背景？答案

【问题标题】：How to keep the same background on a horizontally sliding web?如何在水平滑动的网页上保持相同的背景？
【发布时间】：2014-09-07 18:54:22
【问题描述】：

我想问是否可以在我的webpage 上滑动时保持相同的背景图像（使用图像图标）。我想保留主页的背景（以某种方式修复它），只是让内容“在上面滑动”。我使用this jquery - javascript 方法制作幻灯片。

使用这些旧的 jquery 函数进行滑动：

/* jQuery.ScrollTo
/* jQuery.LocalScroll
/* Fire Horizontal Scroll */

（完整代码在链接页面上）

将 9 个“幻灯片”放在一个包装中。第一个是主页。

    <body>

    <div id="wrap">
    <div id="one"><p>ONE</p></div>
    <div id="two"><p>TWO</p> <a href="#one">« HOME </a> </div>
    <div id="three"><p>THREE</p> <a href="#one">« HOME </a> </div> 
    <div id="four"><p>FOUR</p> <a href="#one">« HOME </a> </div>
    <div id="five"><p>FIVE</p> <a href="#one">« HOME </a> </div>
    <div id="six"><p>SIX</p> <a href="#one">« HOME </a> </div>
    <div id="seven"><p>SEVEN</p> <a href="#one">« HOME </a> </div>
    <div id="eight"><p>EIGHT</p> <a href="#one">« HOME </a> </div>
    <div id="nine"><p>NINE</p> <a href="#one">« HOME </a> </div>
    </div>

这是css中有趣的部分

#wrap {
min-height: 100%;
width: 900%;
overflow: hidden;
}

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 11.1%;
float: left;
text-align: center;
}

* html {background:url(images/mainfull.jpg)}
* html #full {height:100%;}

感谢您的帮助

【问题讨论】：

请在您的帖子中包含相关的 HTML/JS 代码。您问题的读者通常不喜欢在链接的网站中挖掘相关代码。

标签： background web slide fixed horizontal-scrolling

【解决方案1】：

[已解决]您所要做的就是将背景位置更改为固定而不是绝对。

.background-image {
    background: url(images/mainfull.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;

    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 3s;

    -moz-animation-name: fade-in;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 3s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -animation-fill-mode: forwards;

    background-image: url('images/mainfull.jpg');
    background-position: center center fixed;
    background-repeat: no-repeat;
}

【讨论】：