0

我想要字体图标的替代品。所以我决定创建 SVG 图标。我正在使用 Grunt 和 https://github.com/jkphl/grunt-iconizr。一切正常。我使用 Grunt Iconizr 输出 SCSS 文件：

第一的

    %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        @extend %icon;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2223.90625%22%20viewBox%3D%220%200%20512%20510%22%20enable-background%3D%22new%200%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20275.311l151.114-150.395%2054.886%2055.148-206%20205.02-206-205.02%2054.887-55.148z%22%2F%3E%3C%2Fsvg%3E");
    }

第二个输出文件，替代第一个文件：

    %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        background-position: 0 0;
        @extend %icon;
        background-image: url(icons/icons.svg);
    }

我想在图标上创建悬停效果。有什么办法可以使用纯 CSS 解决方案实现悬停效果？我知道我可以使用fill: #CCC;属性来做到这一点……但前提是我的 HTML 代码中有 SVG。如果我使用字体图标，可以通过更改 CSS 颜色属性轻松完成。有什么办法可以改变附加的 SVG 的颜色background-image: url(...)吗？

4

1 回答 1

0

opacity您可以在悬停时添加一个值：

.icon-arrow-down:hover { 
    opacity: 0.5;
}
于 2014-06-30T13:26:47.203 回答