css:单标签复杂背景效果(线性渐变，径向渐变，棋盘效果）

最新推荐文章于 2025-05-11 08:23:40 发布

原创最新推荐文章于 2025-05-11 08:23:40 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用CSS实现单标签上的复杂背景效果，包括线性渐变创建的简单等比网格和不同线宽颜色的网格叠加，以及通过径向渐变生成的圆点阵列和棋盘效果。文章详细展示了各种效果的代码实现和对应的实际展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、线性渐变：
1、简单等比网格：

<html>
<head>
<style type="text/css">
body {
    background-image:
    linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
    linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
    background-size:30px 30px;   
}
</style>
</head>
<body></body>
</html>

效果图：
在这里插入图片描述
原理很简单，就是把垂直和水平的条纹叠加，而 background-image恰好支持 linear-gradient叠加效果。
但是实际条件中一般我们会选择改变格子的大小，然后网格线粗细固定，使用固定长度而不是百分比作为色标。

<html>
<head>
<style type="text/css">
body {
    background:#58a;
    background-image:
    linear-gradient(90deg,white 1px,transparent 0),
    linear-gradient(white 1px,transparent 0);
    background-size:30px 30px;   
}
</style>
</head>
<body></body>
</html>

效果图：
在这里插入图片描述
2、不同线宽，不同颜色网格叠加效果
background-image和background-size都支持叠加

<html>
<head>
<style type="text/css">
body {
    background:#58a;
    background-image:
    linear-gradient(white 2px,transparent 0),
    linear-gradient(90deg,white 2px,transparent 0),
    linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
    linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0)
    ;
    background-size:75px 75px,75px 75px,
                    15px 15px,15px 15px;  
}
</style>
</head>
<body></body>
</html>

效果图：
在这里插入图片描述

二、径向渐变
1、波点

最简单的圆点阵列：

<html>
<head>
<style type="text/css">
body {
    background:#233;
    background-image:
    radial-gradient(tan 30%,transparent 0);
    background-size:30px 30px ;
}
</style>
</head>
<body></body>
</html>

效果图：
在这里插入图片描述
圆点矩阵（使用background-position错开定位）

<html>
<head>
<style type="text/css">
body {
    background:#233;
    background-image:
    radial-gradient(tan 30%,transparent 0),
    radial-gradient(tan 30%,transparent 0);
    background-size:30px 30px ;
    background-position:0 0 ,15px 15px;
   
}
</style>
</head>
<body></body>
</html>

效果图：
在这里插入图片描述
三、棋盘效果：
径向渐变可以实现，但实现代码比较冗杂，需要做四层渐变和定位拼接，相较而言使用svg实现简单一些（将svg文件以data url 的形式嵌入，省去http请求）。

<html>
<head>
<style type="text/css">
body{
background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
            <rect x="50" width="50" height="50" />\
            <rect y="50" width="50" height="50" />\
            </svg>');
background-size: 30px 30px;
}
</style>
</head>
<body>
</body>
</html>

实现效果：
在这里插入图片描述