求解，搞了一晚上都没看懂代码怎么就变成图片那样了

width: 180px;

height: 120px;

background-color: #eee;

background-image: linear-gradient(45deg, #bbb 25%, transparent 0),

linear-gradient(45deg, transparent 75%, #bbb 0),

linear-gradient(45deg, #bbb 25%, transparent 0),

linear-gradient(45deg, transparent 75%, #bbb 0);

background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;

background-size: 30px 30px;

}

img

这样就可以看出来了

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
#ct {

width: 180px;

height: 120px;

background-color: #eee;

background-image: linear-gradient(45deg, #fbb 25%, transparent 0),

linear-gradient(45deg, transparent 75%, #bfb 0),

linear-gradient(45deg, #bbf 25%, transparent 0),

linear-gradient(45deg, transparent 75%, #bbb 0);

background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;

background-size: 30px 30px;}
</style>
</head>
<body>

<div id="ct"></div>

</body>
</html>

img