html - CSS-SVG问题

我有一张SVG图像：

这就是我正在做的展示iamge：

background-color: rgb(110, 100, 90);
background-image: url(a.svg);

结果如下：

a {
  text-decoration: none;
}
.flex {
  display: flex;
}
#a {
  background-color: rgb(56, 46, 36);
  height: 80px;
}
#b {
  justify-content: center;
}
#b a {
  color: rgb(100, 90, 80);
  font-family: "HelveticaNeue-CondensedBold";
  font-size: 18px;
  line-height: 60px;
  padding: 0 15px;
  text-transform: uppercase;
  transition-duration: .25s;
}
#b a:hover,
#b a.active {
  background-color: rgb(110, 100, 90);
  background-image: url(https://imgh.us/a_8.svg);
  color: #fff;
}

<div id="a"></div>
<div id="b" class="flex">
  <a href="#">O nás</a>
  <a href="#" class="active">Fotogaléria</a>
  <a href="#">Denné menu</a>
  <a href="#">Jedálny lístok</a>
  <a href="#">Ubytovanie</a>
  <a href="#">Kontakt</a>
</div>

你能告诉我如何将SVG拉伸到100％吗？

我预期的结果：

以下是演示：Fiddle

最佳答案：

3 个答案:

答案 0 :(得分：2)

如果将背景大小设置为覆盖，则会将其填充到其宽度。 （因为你的图像比较宽，然后很宽）。

添加background-position: bottom;会使其始终显示此特定图像。

a {
  text-decoration: none;
}
.flex {
  display: flex;
}
#a {
  background-color: rgb(56, 46, 36);
  height: 480px;
}
#b {
  justify-content: center;
}
#b a {
  white-space: nowrap;
  color: rgb(100, 90, 80);
  font-family: "HelveticaNeue-CondensedBold";
  font-size: 18px;
  line-height: 60px;
  padding: 0 15px;
  text-transform: uppercase;
  transition-duration: .25s;
}
#b a:hover,
#b a.active {
  background-color: rgb(110, 100, 90);
  background-image: url(http://imgh.us/a_8.svg);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  color: #fff;
}

<div id="b" class="flex">
  <a href="#">O nás</a>
  <a href="#">Fotogaléria</a>
  <a href="#">Denné menu</a>
  <a href="#">Jedálny lístok</a>
  <a href="#">Ubytovanie</a>
  <a href="#">Kontakt</a>
</div>

答案 1 :(得分：0)

按如下方式修改CSS：

#b a:hover, #b a.active {
    background-color: rgb(110, 100, 90);
    background-image: url("http://imgh.us/a_8.svg");
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

您需要background-size 100% 100%来填充所有方向的背景（特别是在较窄的元素上），但它确实会影响您的过渡。

答案 2 :(得分：0)

实际上，我所做的只是将背景仅作为图像提供给100％

现在发生的情况是我使用了背景属性，因此它会自动覆盖背景颜色，而背景重复由于100％

即使你可以通过重复给它背景这里是我做了什么，它看起来不错不是吗。？

#b a:hover, #b a.active {
  background-color: rgb(110, 100, 90);
  background: url(http://imgh.us/a_8.svg) 100%;
  color: #fff;
}