我想要一个响应式棋盘背景,看起来应该像颜色选择器中的背景:
我希望图案始终显示N每宽度的正方形数量(动态)。
.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>
如果容器不是,则正方形不是 1:1 的纵横比,并且没有响应:
div {
width: 300px;
height: 100px;
resize: auto;
overflow: hidden;
aspect-ratio: 1/2;
border: 1px solid red;
background: repeating-conic-gradient(transparent 0 90deg, grey 0 180deg)
0 0 / 25% 25% round;
}
<div></div>
问题:
background-repeat: round
如果可能的话,我不希望在棋盘背景中有任何截断。
不是这样的(在右边和底部切断):
这是一个依赖于conic-gradient的想法:
.chess {
background:
repeating-conic-gradient(
#fff 0 90deg,
grey 0 180deg)
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>
如果你想拥有相同的尺寸并且没有被切断,你也可以考虑
round
的background-repeat
:
.chess {
background:
repeating-conic-gradient(
#fff 0 90deg,
grey 0 180deg)
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 替换渐变以获得相同的结果:
.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(在撰写本文时)不支持相对于父宽度/高度调整宽度/高度大小,因此别无选择,只能创建一个额外的(伪)元素并相对于其容器大幅增加其大小,同时保持纵横比-完美正方形的比率
1:1
.
通过一些简单的数学运算,就可以轻松控制我们希望图案出现的重复次数,即下例中的
10
。请注意,这是一个 resizable 示例:
div {
width: 60%;
aspect-ratio: 2/1;
overflow: hidden;
resize: auto;
position: relative;
outline: 5px solid red;
}
div::before {
--pattern-repeated: 10; /* per-row */
content: '';
position: absolute;
top: 0;
left: 0;
width: 10000%;
aspect-ratio: 1/1;
background:
repeating-conic-gradient(
transparent 0 90deg,
grey 0 180deg)
0 0 /
calc(2%/var(--pattern-repeated)) calc(2%/var(--pattern-repeated)) round;
}
<div></div>
使用这个:
.chess {
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 60px 60px;
background-position: 0 0, 0 29px, 29px -29px, -29px 0px;
}
.btn {}
.fas {
color: black;
text-align: center;
font-size: 10em;
}
.fas.f5em {
font-size: 5em;
}
.fas.f35em {
font-size: 35em;
}
<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>
<div>
<div class="btn btn-outline-secondary chess">
<i class="fas fa-car f5em"></i>
</div>
<div>
<div>
<div class="btn btn-outline-secondary chess">
<i class="fas fa-car f35em"></i>
</div>
<div>
或者你可以使用像这样的图案图像:
https://mdn.mozillademos.org/files/5705/alpha.png