最佳答案
有必要为 nav
添加 position: relative;
。代码如下。
或者可以裁剪出一张图片,在 100% 高度的右侧或左侧带有正方形和白色缩进。将其设置为 nav
并指定一个属性 background-repeat: repeat-x;
.container{
max-width:900px;
margin:0 auto;
border:1px solid grey;
padding:0 20px;
}
nav{
display:flex;
justify-content:space-between;
border:2px solid red;
position: relative;
}
nav:before{
background-image:
linear-gradient(white 50%, transparent 50%),
linear-gradient(to right, white 50%, #a2cbf4 50%);
background-size: 5px 5px;
}
.logo{
height: 40px;
background-color: pink;
}
.checkered-bg {
width: 100%;
height: 100%;
}
.checkered-bg::before, .checkered-bg::after {
content: "";
width: 100%;
height: 70%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
}
.checkered-bg::before {
background-image:
linear-gradient(white 50%, transparent 50%),
linear-gradient(to right, white 50%, #a2cbf4 50%);
background-size: 5px 5px;
}
.checkered-bg::after {
background-image: linear-gradient(transparent, white);
}
<div class="container">
<nav class="checkered-bg">
<div class="logo">logo</div>
<div class="menu">menu</div>
</nav>
</div>
关于css - 带有 CSS 的小方 block 背景图案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49525878/