如何实现导航背景图片仅在边框重复且不破坏Flex布局？

你可以通过两种方法实现需求，完全不会破坏Flex布局：

方法一：CSS多背景图实现左右边缘重复 #

直接利用CSS多背景图特性，给nav同时设置左右两个背景，分别定位到两侧并垂直重复，中间保留原背景色。修改后的代码如下：

nav {
  border-width: 1px;
  border-style: solid;
  height: 50px;
  background-color: #333;
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  /* 多背景配置：左右各一个背景图 */
  background-image: url(https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg), 
                    url(https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg);
  background-size: 20% auto;
  background-position: left center, right center;
  background-repeat: repeat-y, repeat-y;
}

.nav a {
  /* 给链接加样式，避免被背景图遮挡 */
  color: #fff;
  line-height: 50px;
  text-decoration: none;
}

方法二：伪元素定位实现边缘背景 #

如果需要更灵活的控制（比如调整背景图高度、偏移量），可以用::before和::after伪元素——它们不属于Flex布局流，完全不会干扰内部链接的排列：

nav {
  border-width: 1px;
  border-style: solid;
  height: 50px;
  background-color: #333;
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  position: relative; /* 让伪元素基于nav定位 */
}

/* 左侧背景伪元素 */
nav::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20%; /* 和原背景大小保持一致 */
  background-image: url(https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg);
  background-repeat: repeat-y;
  background-position: left center;
  background-size: cover;
}

/* 右侧背景伪元素 */
nav::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20%;
  background-image: url(https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg);
  background-repeat: repeat-y;
  background-position: right center;
  background-size: cover;
}

.nav a {
  color: #fff;
  line-height: 50px;
  text-decoration: none;
  position: relative; /* 让链接在伪元素上方显示 */
  z-index: 1;
}

为什么直接加<img>会破坏布局？ #

因为<img>是HTML元素，放在Flex容器（nav）里会自动成为Flex子元素，会被justify-content: space-evenly纳入布局计算，自然会打乱原有链接的排列。而CSS背景或伪元素属于装饰性样式，不参与文档流，完全不会影响Flex布局逻辑。

内容的提问来源于stack exchange，提问作者Ariesis