css实现全屏网格效果（斜格）

最新推荐文章于 2023-05-23 16:18:51 发布

wyy爱学习

最新推荐文章于 2023-05-23 16:18:51 发布

阅读量1.1k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_57399180/article/details/123523963

版权

话不多说，上代码！！！

<!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>
        body {
            margin: 0;
        }

        .bdgrid {
            height: 100%;
            width: 100%;
            background-size: 100% 100%;
            position: fixed;
            margin: 0;

            background: -webkit-linear-gradient(45deg, transparent 48px, rgb(133, 133, 134) 1px, transparent 49px), -webkit-linear-gradient(-45deg, transparent 48px, rgb(133, 133, 134) 1px, transparent 49px);
            background: -ms-linear-gradient(top, transparent 39px, blue 40px), -ms-linear-gradient(left, transparent 39px, red 40px);
            background-size: 68px 68px;


        }

        .bdkgc {
            opacity: 0.9;
            width: 100%;
            height: 100%;
            position: fixed;
            -webkit-background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        .ctn {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
    </style>
</head>

<body>
    <div class="bdgrid">
        <!--第二层，可改变背景色-->
        <div class="bdkgc">
            <!--第三层，可放内容-->
        </div>
    </div>
</body>

</html>