Question

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

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

困难的是要对每台设备产生影响。因此，每个设备都应该全屏看到完整的图片（不要看下面的文字;例如：看不到“我们不像”-stuff）。但是，如果任何设备向下滚动一下（一个scrool），图片应该滑到顶部，并显示以下文本。

希望你们能跟着我。

提前致谢：）

Answer 1

使用css属性有一种简单的方法。

您在html中所要做的就是......

<div></div>

在你的css ......

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

Answer 2

在这里试试代码。 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>

务必保持学习和实践，练习，练习的良好工作！

全屏图像直到滚动（响应）

2 个答案: