Question

我想问一下在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%;}

感谢您的帮助

Answer 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;
}

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

1 个答案: