html - 背景仅在我的盒子的边界重复

Question

我有一个导航，我想在其中添加背景图像，因为如果我添加普通图像，它就会破坏柔性，并且我希望它重复，但仅在边缘周围。不知道有没有什么办法可以达到这个目的。

我当前的代码:

nav {
  border-width: 1px;
  border-style: solid;
  height: 50px;
  background-color: #333;
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  /*background-image: url(../Imagenes/navmusic.png);*/
  /*bogus img used for the snippet here*/
  background-image: url(https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg);
  background-size: 20%;
  background-position-x: right;
  background-position-y: -20px;
  background-repeat: no-repeat;
}

<nav class="nav">
  <a class="active" href="#home">Home</a>
  <a href="Formulario.html">Formulario</a>
</nav>

我尝试将其添加为普通图像，但我还不知道如何很好地使用 Flex，这给我带来了问题，因为它将它算作 Flex 的一个元素，最后我不能做我想做的事。

That's what I have and I would like the image to be repeated just on the other side.

Answer 1

你可以这样做:

  background: url("https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg") left ,url("https://pixabay.com/get/gbcda7058a3885ac11a062304ad9ba8647e6c3457ba65616142693813b48ad64d1b61c96e7a19f19e0a5611ce600767961015c603d8c3dcc524b690b66394d497a42e9f1f38c9fcc70f56bd0b5933aaea_640.jpg") right;

此外，您也可以使用 background-size: contain; 而不是使用 background-size: 20%; 和 background-position-y: -20px; .

nav {
  border-width: 1px;
  border-style: solid;
  height: 50px;
  background-color: #333 !important;
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  background: url("https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg") left ,
  url("https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg") right;
  background-size: contain;
  background-repeat: no-repeat;
}

<nav class="nav">
  <a class="active" href="#home">Home</a>
  <a href="Formulario.html">Formulario</a>
</nav>