首页 >
css给图标填充 |data- css
CSS 给图标填充是一种常见的技巧，可以帮助增强页面视觉效果，让图标更加醒目。下面介绍一些 CSS 针对图标填充的技巧。
## 简单的填充
最简单的方法就是给元素应用样式 `fill` 。如下例子，大家定义一个指向 `.icon` 类的样式，然后应用 `fill` 属性：
“`
.icon {
fill: blue;
}
“`
这将导致所有指向 `.icon` 类的 SVG 图标都填充为蓝色。
## 更加复杂的填充
如果想要更加灵活地控制填充的方式，比如只对单个元素进行填充，大家可以使用 `background-image` 属性。对于想要创建填充的 SVG 的元素，大家需要添加以下代码：
“`
.icon {
background-image: url(“icon.svg”);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
“`
这将让浏览器在 `.icon` 元素背景上显示 SVG 文件。添加了 `background-size` 属性后，SVG 图标将被缩放到容器内部。而 `background-repeat` 属性则会使 SVG 制作多重背景时保持静态。最后， `background-position` 属性将使图标垂直和水平居中。
## 通过透明度创建填充
如果你想要创建一个透明的填充，可以使用 `opacity` 属性。例如：
“`
.icon {
background-color: blue;
opacity: .5;
}
“`
这意味着图标将被半透明填充为蓝色。在不需要完全渐隐的情况下使用此方法会十分有用。
## 使用 SVG 简单路径操作填充
如果你有一个更加复杂的形状，需要多个单独的填充来进行样式设置，就可以使用 SVG 简单路径操作。这是一个较为复杂的 CSS 技巧，需要深入理解 SVG 路径数据。以下代码将显示一个基础的 SVG 图像，并使用 `path` 元素标记其一部分：
“““
这将创建一个简单的斜线图标。接下来，大家需要将元素指向该图标，再稍微调整一下样式即可：
“`
.icon {
background-image: url(data:image/svg+xml;utf8,);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: blue;
}
“`
这样就可以使 `.icon` 类背景上的图标带有蓝色填充。这是原始图标和通过代码定义的样式的对比图：
## 结论
这些方法只是在 CSS 中针对图标填充的一些基本技巧。当然，还有很多其他的方式可以控制图标的填充颜色、大小等。希望本文能对您熟悉 CSS 图标填充提供帮助。