Question

我正在尝试在页面文本上制作一个垂直可滚动的图片库，其内容与此网站https://kontorkontor.dk/非常相似。您能帮我弄清楚如何制作吗？

Answer 1

将文本设置为固定位置。和你很好去。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>bruh</title>
    <style>
        
        img {
            height: 65vh;
            width: auto;
            left: 50%;
            transform: translateX(-50%);
            display: block;
            position: relative;
            margin: 200px 0;
        }

        ul {
            position: fixed;
            top: 0;
        }

        ul li {
            list-style: none;
            font-size: 150px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
    </style>
</head>

<body>

    <ul>
        <li>Hey guys</li>
        <li>+31 6 5342674</li>
        <li>hoi@google.com</li>
    </ul>

    <section class="gallery">
        <img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180601_Emma_09_0509-copie.jpg" alt="image">
        <img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180701_Schon__010127.jpg" alt="image">
        <img src="http://juliecristobal.com/wp-content/uploads/2018/11/SK_FW18_ADDITIONALPIC_06_WEB.jpg" alt="image">
        <img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180415_Elodie_05_1176-2-copie-1.jpg" alt="image">
    </section>

</body>

</html>

垂直可滚动图片库

1 个答案: