繁体   English   中英

SVG项目符号的自定义颜色

[英]Custom color for SVG bullet point

我有以下CSS

ul {
  list-style: none;
}

ul > li::before {
  content: "";
  height: 1em;
  width: 1em;
  display: block;
  float: left;
  margin-left: -1.5em;
  margin-top: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
}

ul > li::before {
  background-image: url(../images/check-mark.svg);
}

哪个适用于下面的HTML

  <ul>
    <li>first</li>
    <li>last</li>
  </ul>

现在,我想使用相同的复选标记添加第二个列表,但颜色不同。

所以,我已经更新了我的代码如下

HTML

   <ul class="blue">
     <li>first</li>
     <li>last</li>
   </ul>

CSS

svg {
  fill: currentColor;
}

ul.blue > li::before {
  color: blue;
}

但是复选标记仍然是黑色的。 如何将blue列表中的复选标记设为蓝色?

你不能只用颜色改变图像的颜色:蓝色; 也许这会奏效:

ul.blue > li::before {
fill: blue;
}

或者只是找到带有蓝色复选标记的另一个图像,并以相同的方式添加它

ul.blue > li::before {
  background-image: url(../images/blue-check-mark.svg); 
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM