CSS background背景图标的变色技巧

实力
444 阅读3分钟

CSS中的背景图标是一种常见的设计元素，它可以为应用程序或网站添加个性化的风格和视觉效果。 在某些情况下，我们可能需要通过更改背景图标的颜色来使其与应用程序或网站的主题相匹配。

使用多个背景图片

第一种方法是使用多个背景图片，其中一个是原始的未染色图像，而另一个则是染色后的图像。我们可以使用CSS伪元素:before或:after来设置另一个背景，并将其放置在原始背景上方。然后，我们可以使用CSS filter属性来对新的背景图像进行染色，以达到所需的效果。

.icon {
  background-image: url("originalIcon.png"), url("coloredIcon.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("originalIcon.png");
  background-repeat: no-repeat;
  background-position: center center;
  filter: invert(20%) sepia(50%) saturate(200%);
  z-index: 1;
}

在这个例子中，我们首先定义了一个带有原始图像的.icon类。 然后，我们使用伪元素:before来添加另一个背景，并将其放置在原始背景之上。 最后，我们使用CSS filter属性将新的背景图像进行染色。 在这个例子中，我们使用了invert、sepia和saturate滤镜，但是你可以根据需要使用其他滤镜。

使用SVG

第二种方法是使用SVG（可缩放矢量图形）和CSS fill属性。 SVG是一种基于XML的图像格式，它可以缩放并保持清晰度，而不会失去质量。 使用SVG，我们可以轻松地创建具有可定制颜色的矢量图标。

.icon {
  width: 24px;
  height: 24px;
  background-image: url("icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-red {
  fill: red;
}

在这个例子中，我们首先定义了一个带有SVG背景的.icon类，并将其设置为contain大小以确保它适合容器。 然后，我们使用CSS fill属性将图标填充为所需的颜色。 在这个例子中，我们将图标填充为红色。

使用CSS变量

第三种方法是使用CSS变量和CSS mask-image属性。 CSS变量是一种用于存储和重用值的机制。 我们可以在根选择器中定义一个或多个CSS变量，并在整个文档中使用它们。 CSS mask-image属性允许我们将背景图像与遮罩结合使用，从而可以快速实现复杂的效果。

:root {
  --icon-color: #ff0000;
}

.icon {
  background-image: url("icon.png");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-mask-image: url("icon.png");
  mask-image: url("icon.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  filter: invert(100%) sepia(100%) saturate(20000%);
  -webkit-filter: invert(100%) sepia(100%) saturate(20000%);
}

.icon-red {
  --icon-color: #ff0000;
}

.icon-red {
  -webkit-mask-composite: clear;
  mask-composite: subtract;
  background-color: var(--icon-color);
}

在这个例子中，我们首先定义了一个带有CSS变量的根选择器，并将其用于后续样式。 然后，我们使用CSS mask-image属性将图像作为遮罩，并使用filter和-webkit-filter属性对其进行染色。 最后，我们定义了一个带有不同颜色的类.icon-red，并使用另一种mask-composite值来创建一个不透明的背景。

总结

在本文中，我们介绍了三种使用CSS实现背景图标变色的技巧。 使用多个背景图片、SVG和CSS变量都是非常有用的方法，可以帮助我们快速实现个性化和定制化的设计效果。 无论你选择哪种方法，都要确保它们与你的应用程序或网站的主题相匹配，并提供良好的用户体验。

avatar
文章
阅读
粉丝