时间戳

首页 > 解决方案 > 将 svg 图像更改为导航栏中的文本。引导程序

css - 将 svg 图像更改为导航栏中的文本。引导程序

问题描述

是否可以将svg图像转换为文本？我已经购买了其中一个 Bootsrap模板。

在导航栏中，向下滚动时，文本会从白色变为黑色。我希望它与我的徽标相同。我可以将我的徽标更改为文字吗？如果是这样怎么办？

在此处输入图像描述 *如果我有一个标志，如果它是白色的，向下移动后，它是不可见的。

任何帮助将不胜感激。

标签： cssbootstrap-4icons

解决方案

如果要将图像从黑色更改为白色，反之亦然，您可以使用 css filter属性及其invert()功能

body {
  font: 13px Verdana;
  
}

.div {
  display: flex;
  align-items: center;
  padding: 10px;
}

.before {
  background: red;
  color: white;
}

img {
  margin-left: 30px;
}

.before img {
  filter: invert(1)
}

.after {
  border: 1px solid red
}
Before Scroll
<div class="div before">
  <h2>Boomerange</h2>
  <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/vote.svg" width="100">
</div>
<br><br> After Scroll
<div class="div after">
  <h2>Boomerange</h2>
  <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/vote.svg" width="100">
</div>

推荐阅读