我想要一个响应式棋盘格背景,它应该看起来像颜色选择器中的背景:
我试过的:
.chess {
background-image:
linear-gradient(90deg, #999 30px, white 30px),
linear-gradient(90deg, white 30px, #999 30px),
linear-gradient(90deg, #999 30px, white 30px),
linear-gradient(90deg, white 30px, #999 30px),
linear-gradient(90deg, #999 30px, white 30px),
linear-gradient(90deg, white 30px, #999 30px),
linear-gradient(90deg, #999 30px, white 30px);
background-position: 0 0, 0 30px, 0 60px, 0 90px, 0 120px;
background-repeat: repeat-x;
background-size: 60px 30px;
height: 150px;
margin: 15px auto;
width: 30%;
}
.fas {
text-align: center;
font-size: 10em
}Run Code Online (Sandbox Code Playgroud)
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> …Run Code Online (Sandbox Code Playgroud)