English 中文(简体)
利用CSS改变装满和(或)中线
原标题:Changing fill and/or stroke color of loaded svg using CSS

在以下例子中,我制作自己的项目表象,把其作为背景图象列入清单项目内容,并确定<代码>后地-repeat至no-repeat

ul
{
padding: 0;
}

li:nth-child(1) {
  list-style: none;
  padding: 10px 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns= http://www.w3.org/2000/svg  width= 20  height= 20  viewBox= 0 0 24 24  fill= none  stroke= blue  stroke-width= 2  stroke-linecap= round  stroke-linejoin= round  class= feather feather-home %3E%3Cpath d= M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z %3E%3C/path%3E%3Cpolyline points= 9 22 9 12 15 12 15 22 %3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}

li:nth-child(2) {
  list-style: none;
  padding: 10px 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns= http://www.w3.org/2000/svg  width= 16  height= 16  fill= blue  class= bi bi-linkedin  viewBox= 0 0 16 16 %3E%3Cpath d= M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4  /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>
</body>
</html>

For one HTML document, I m OK with having these list markers remain blue as shown above. However, for another document, I d like to default to another color, for example red.

采用过滤器并不可行,因为它似乎也影响到清单项目的内容。 我只需要修改清单项目标记的颜色。

我如何利用安保部执行这一行为? I.e. 我如何能够在另一个网页上找到蓝色标码,而不重复url()中的全部数据链接?

上述复制件不是重复的,因为它没有处理使用<条码>背地-image<>条码/代码”装载特别志愿人员G的玉米案例。 当特殊群体被作为背景形象使用时,它不是OM的一部分,因此可能直接受到Javales的操纵。

问题回答

http://stackoverflow.com/users/322084/chrwahl” 参见:mask-image 。 而不是background-image

见下文初步做法,但使用<代码>mask-image。 缩略语 缩略语

:root {
  --DodgerBlue: #1E90FF;
  --MediumSlateBlue: #7B68EE;
}

ul {
  padding: 0;
}

li {
  list-style: none;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

li a {
  color: var(--DodgerBlue);
  text-decoration: none;
}

li::before {
  background: var(--DodgerBlue);
  content:   ;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

li:hover a {
  color: var(--MediumSlateBlue);
}

li:hover::before {
  background: var(--MediumSlateBlue);
}

li:nth-child(1)::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns= http://www.w3.org/2000/svg  width= 20  height= 20  viewBox= 0 0 24 24  fill= none  stroke= black  stroke-width= 2  stroke-linecap= round  stroke-linejoin= round %3E%3Cpath d= M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z %3E%3C/path%3E%3Cpolyline points= 9 22 9 12 15 12 15 22 %3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns= http://www.w3.org/2000/svg  width= 20  height= 20  viewBox= 0 0 24 24  fill= none  stroke= black  stroke-width= 2  stroke-linecap= round  stroke-linejoin= round %3E%3Cpath d= M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z %3E%3C/path%3E%3Cpolyline points= 9 22 9 12 15 12 15 22 %3E%3C/polyline%3E%3C/svg%3E");
}

li:nth-child(2)::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns= http://www.w3.org/2000/svg  width= 16  height= 16  fill= black  viewBox= 0 0 16 16 %3E%3Cpath d= M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4  /%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns= http://www.w3.org/2000/svg  width= 16  height= 16  fill= black  viewBox= 0 0 16 16 %3E%3Cpath d= M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4  /%3E%3C/svg%3E");
  mask-size: 20px;
  -webkit-mask-size: 20px;
}
<ul>
    <li><a href="#">First item</a></li>
    <li><a href="#">Second item</a></li>
</ul>

See fiddle edition...




此处是使用同一<条码>的另一种例子。 方法,但使用<代码>i html 标签的更可管理的yn子,可以通过调整母体的体体体体的体积来轻而易变。

:root {
  --DodgerBlue: #1E90FF;
  --MediumSlateBlue: #7B68EE;
}

ul {
  padding: 0;
}

.first-list {
  font-size: 1rem;
}

.second-list {
  font-size: 1.5rem;
}

.third-list {
  font-size: 2rem;
}

li {
  list-style: none;
  margin-bottom: 10px;
}

li a {
  color: var(--DodgerBlue);
  text-decoration: none;
}

.icon {
  display: inline-block;
  width: 1.25em;
}

.icon::before {
  background: var(--DodgerBlue);
  content:  &nbsp; ;
  width: 100%;
  display: inline-block;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: auto 100%;
  -webkit-mask-size: auto 100%;
  mask-position: center;
  -webkit-mask-position: center;
}

li:hover a {
  color: var(--MediumSlateBlue);
}

li:hover a .icon::before {
  background: var(--MediumSlateBlue);
}

.icon-home::before {
  --IconHome: url("data:image/svg+xml;utf8,%3Csvg xmlns= http://www.w3.org/2000/svg  width= 20  height= 20  viewBox= 0 0 24 24  fill= none  stroke= black  stroke-width= 2  stroke-linecap= round  stroke-linejoin= round %3E%3Cpath d= M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z %3E%3C/path%3E%3Cpolyline points= 9 22 9 12 15 12 15 22 %3E%3C/polyline%3E%3C/svg%3E");
  mask-image: var(--IconHome);
  -webkit-mask-image: var(--IconHome);
}

.icon-linkedin::before {
  --IconLinkedin: url("data:image/svg+xml;utf8,%3Csvg xmlns= http://www.w3.org/2000/svg  width= 16  height= 16  fill= black  viewBox= 0 0 16 16 %3E%3Cpath d= M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4  /%3E%3C/svg%3E");
  mask-image: var(--IconLinkedin);
  -webkit-mask-image: var(--IconLinkedin);
}
<ul class="first-list">
    <li><a href="#"><i class="icon icon-home"></i> First item</a></li>
    <li><a href="#"><i class="icon icon-linkedin"></i> Second item</a></li>
</ul>

<ul class="second-list">
    <li><a href="#"><i class="icon icon-home"></i> First item</a></li>
    <li><a href="#"><i class="icon icon-linkedin"></i> Second item</a></li>
</ul>

<ul class="third-list">
    <li><a href="#"><i class="icon icon-home"></i> First item</a></li>
    <li><a href="#"><i class="icon icon-linkedin"></i> Second item</a></li>
</ul>

See fiddle edition...





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签