CSS背景小图标变色实例页面

回到相关文章 »

效果：

变色测试

原图：

渲染效果：

选择颜色：

实际案例

代码：

CSS代码：

.colorful {
    display: inline-block;
    width: 32px; height: 32px;
    color: #f4615c;
    background: linear-gradient(currentColor, currentColor), url(./xin.svg), #fff;
    background-blend-mode: lighten, normal;
    background-size: 100%;
}

input[type="search"] {
    --ui-fill: var(--ui-gray);
    background: linear-gradient(var(--ui-fill), var(--ui-fill)), url(./icon-search.svg) no-repeat 10px 50% / 20px, #fff;
    background-blend-mode: screen, normal;
    padding-left: 38px;
}
[type="search"]:focus {
    --ui-fill: var(--ui-blue);
}

HTML代码：

<i class="colorful"></i>
                
<input type="search" class="ui-input">