CSS 的小方块背景图案

Question

我正在尝试重现类似于下面这种模式的导航栏：

有谁知道我如何使用纯 CSS 来应用这个小方块图案？它们从顶部的这种浅蓝色开始，并在高度的 50% 左右平滑地渐变到白色。

非常感谢！

Answer 1

有必要为 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 的小方块背景图案

Little squared background pattern with CSS

css

background

background-image