前端页面 CSS+HTML5 简单实现视觉差效果很简单

本文链接：https://blog.csdn.net/m0_60842861/article/details/126427955

话不多说先看效果后看代码（gif 有点模糊见谅）

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 取消元素自带的内边距和外边距 */
        
        * {
            margin: 0;
            padding: 0
        }
        /* 设置窗口自适应的 */
        
        html,
        body {
            height: 100%
        }
        
        div {
            height: 100%;
            /* 取消平铺 */
            background-repeat: no-repeat;
            /* 背景固定 */
            background-attachment: fixed;
            /* 背景尺寸大小 */
            background-size: cover
        }
        
        .red {
            /* 插入背景图片 */
            background-image: url('https://img0.baidu.com/it/u=4285949849,2816553460&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500');
        }
        
        .blue {
            /* 插入背景图片 */
            background-image: url('https://img1.baidu.com/it/u=1748679971,3116280725&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500');
        }
        
        .yellow {
            /* 插入背景图片 */
            background-image: url('https://img2.baidu.com/it/u=4154226613,2211547833&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');
        }
    </style>
</head>

<body>
    <!-- 三个盒子切换的视觉差案例 -->
    <div class="red"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
</body>

</html>

注：代码中所用到的图片均来自https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1660898031162_R&pv=&ic=&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=MCwzLDIsMSw2LDQsNSw3LDgsOQ%3D%3D&ie=utf-8&sid=&word=%E7%94%B5%E8%84%91%E5%85%A8%E5%B1%8F%E6%A1%8C%E9%9D%A2

如有侵权，请联系删除