CSS 小技能（一）：HTML 两个图片竖着平铺、设置图片点击、设置滚动条颜色

news2024/11/15 11:01:35

下面的代码没有考虑响应式的效果，如果考虑的话还需要一些代码进行处理。

【注】当时写的时候仅考虑了 webkit 内核的浏览器，如果是 IE 或者其他浏览器，请增加额外的 CSS 样式进行控制。

<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        .container {
            height: 100%;
            overflow-y: scroll;
        }

        /* 仅适用于Webkit浏览器（Chrome和Safari等） */
        ::-webkit-scrollbar {
            width: 0.3em; /* 设置滚动条宽度 */
        }

        ::-webkit-scrollbar-track {
            background-color: transparent; /* 设置滚动条轨道背景色 */
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgb(74, 144, 250); /* 设置滚动条滑块颜色 */
            border-radius: 4px; /* 设置滚动条滑块圆角 */
        }

        .image {
            height: 90vh;  /* 没有使用 100vh，主要是让用户直观的看到下面还有一张图 */
            background-size: cover;
            background-repeat: no-repeat;
        }

		/* 设置第一个图片地址 */
        .image:nth-child(1) {
            background-image: url('test.jpg');
        }

		/* 设置第二个图片地址 */
        .image:nth-child(2) {
            background-image: url('test.jpg');
        }
    </style>
</head>
<body>
<div class="container">
    <a href="https://www.baidu.com">
        <div class="image"></div>
    </a>
    <a href="http://www.qq.com">
        <div class="image"></div>
    </a>
</div>
</body>
</html>