文章/答案/技术大牛

发布

社区首页 >问答首页 >滚动之前的全屏图像(响应式)

问滚动之前的全屏图像(响应式)
EN

Stack Overflow用户

提问于 2016-08-31 07:11:32

回答 2查看 1.1K关注 0票数 2

我对HTML和CSS比较陌生，但是“技能来自实践”。

我想创建一个类似于这个页面的页面滚动效果：Jolla

困难的是要在每台设备上都能获得效果。所以每个设备都应该能看到全屏(不能看到下面的文字，例如:看不到“我们不一样”的-stuff)。然而，如果任何设备向下滚动一点(一个滚动条)，图片应该滑到顶部，下面的文本应该会显示出来。

希望你们能跟我走。

提前感谢:)

css

scroll

fullscreen

responsive

html

回答 2

Stack Overflow用户

发布于 2016-08-31 07:25:02

有一种使用css属性的简单方法可以做到这一点。

你只需要在你的html中做的就是...

<div></div>

在你的css中...

div {
    width: 100%;
    height: 100%;
}
div {
  background-image: url("rand_img.jpg");
  background-attachment: fixed;
  background-size: cover;
}

票数 1

Stack Overflow用户

发布于 2016-08-31 10:27:03

请尝试此处的代码。还有css-tricks.com的更深入的文章，本文就是基于这篇文章的。

    <!DOCTYPE html>

<html lang="en">

<head>
    <title>Header</title>

</head>

<body>

    <div id="background">
    </div>

    <style>
        #background {
            background-image: url("https://hd.unsplash.com/photo-1471705301355-ec78367a7b07");
            position: fixed;
            top: 0;
            left: 0;
            /* Preserve aspet ratio */
            min-width: 100%;
            min-height: 100%;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
        }

    </style>

</body>

一定要在学习和实践中保持良好的工作，实践！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39238419

复制

相似问题

问滚动之前的全屏图像(响应式)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动之前的全屏图像(响应式)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动之前的全屏图像(响应式)
EN