如何在CSS中创建响应式棋盘背景? [英] How to create a responsive checkerboard background in CSS?
问题描述
我希望有一个固定的棋盘格背景,看起来应该像颜色选择器中的背景:
I want to have a resposive checkerboard background that should look like the background in a color selector:
我尝试过的事情:
.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
}
<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">
<div>
<div class="btn btn-outline-secondary chess">
<i class="fas fa-car"></i>
</div>
<div>
问题:
- 我的结果不是固定的. (我的像素大小固定)
- 如果我有较大的背景或较小的元素,则需要很多代码.
- 我没有达到使模式居中或使用
background-repeat: round
如果可能的话,我不希望棋盘背景中的任何内容都被剪掉.
If it is possible I don't want any cut off elements in the checkerboard background.
不是这样的(在右侧和底部切断):
Not like this (cut off on the right and bottom):
推荐答案
这是一个依赖圆锥体渐变,但实际上仅在Chrome上受支持:
Here is an idea that rely on conic-gradient but supported only on Chrome actually:
.chess {
background:
conic-gradient(#fff 0deg ,#fff 90deg,
grey 90deg,grey 180deg,
#fff 180deg,#fff 270deg,
grey 270deg,grey 360deg)
0 0/25% 25%;
margin: 15px;
padding:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>
如果您希望具有相同的尺寸并且没有截断,也可以考虑使用background-repeat
中的round
:
You can also consider round
of background-repeat
if you want to have the same size and no cut off:
.chess {
background:
conic-gradient(#fff 0deg ,#fff 90deg,
grey 90deg,grey 180deg,
#fff 180deg,#fff 270deg,
grey 270deg,grey 360deg)
0 0/40px 40px round;
margin: 15px;
padding:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>
为了获得更好的支持,您可以使用SVG替换渐变以得到相同的结果:
For better support, you can replace the gradient with an SVG to have the same result:
.chess {
background:
url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>')
0 0/25% 25%;
margin: 15px;
padding:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>
并且具有固定大小:
.chess {
background:
url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>')
0 0/40px 40px round;
margin: 15px;
padding:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>
这篇关于如何在CSS中创建响应式棋盘背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!