Question

CSS：

.img-smiley  {
    background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMzIgLTMyIDgwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMyIC0zMiA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDk3Mi4wMDAwMDApIj4NCgk8ZyBpZD0iQW5zd2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTEyLjAwMDAwMCkiPg0KCQk8ZyBpZD0iR3JvdXAtMTAiPg0KCQkJPGcgaWQ9IlBhZ2UtMS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDIwLjAwMDAwMCkiPg0KCQkJCTxwYXRoIGZpbGw9IiM3ODkwOUMiIGQ9Ik0yNS0xMDY2Yy0xNC43LDAtMjYuNy0xMi0yNi43LTI2LjdjMC0wLjksMC43LTEuNywxLjctMS43czEuNywwLjcsMS43LDEuN2MwLDEyLjksMTAuNSwyMy4zLDIzLjMsMjMuMw0KCQkJCQlzMjMuMy0xMC41LDIzLjMtMjMuM2MwLTAuOSwwLjctMS43LDEuNy0xLjdzMS43LDAuNywxLjcsMS43QzUxLjctMTA3OCwzOS43LTEwNjYsMjUtMTA2NiBNMTAtMTExMWM0LjYsMCw4LjMsMy43LDguMyw4LjMNCgkJCQkJYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNWMtMi44LDAtNSwyLjItNSw1YzAsMC45LTAuNywxLjctMS43LDEuN3MtMS43LTAuNy0xLjctMS43DQoJCQkJCUMxLjctMTEwNy4zLDUuNC0xMTExLDEwLTExMTEgTTQwLTExMTFjNC42LDAsOC4zLDMuNyw4LjMsOC4zYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNQ0KCQkJCQlzLTUsMi4yLTUsNWMwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzMS43LTExMDcuMywzNS40LTExMTEsNDAtMTExMSBNMjUtMTEzNmMtMjIuMSwwLTQwLDE3LjktNDAsNDANCgkJCQkJczE3LjksNDAsNDAsNDBzNDAtMTcuOSw0MC00MFM0Ny4xLTExMzYsMjUtMTEzNiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=");
    height:80px;
    width:80px;
    display:block;  
}

HTML：

<body>
    <a href="javascript:void(0)">
        <div class="img-smiley">
        </div>
    </a>
</body>

如何在从原始位置悬停到绿色时更改颜色？

Answer 1

您好{而不是background-image使用mask-image，然后在悬停时更改background-color颜色...请检查https://jsfiddle.net/RRR0308/v3n0g8zt/1/

<强> HTML

<a href="javascript:void(0)">
        <div class="img-smiley">
        </div>
    </a>

<强> CSS

.img-smiley 
{
  background-color: red;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMzIgLTMyIDgwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMyIC0zMiA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDk3Mi4wMDAwMDApIj4NCgk8ZyBpZD0iQW5zd2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTEyLjAwMDAwMCkiPg0KCQk8ZyBpZD0iR3JvdXAtMTAiPg0KCQkJPGcgaWQ9IlBhZ2UtMS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDIwLjAwMDAwMCkiPg0KCQkJCTxwYXRoIGZpbGw9IiM3ODkwOUMiIGQ9Ik0yNS0xMDY2Yy0xNC43LDAtMjYuNy0xMi0yNi43LTI2LjdjMC0wLjksMC43LTEuNywxLjctMS43czEuNywwLjcsMS43LDEuN2MwLDEyLjksMTAuNSwyMy4zLDIzLjMsMjMuMw0KCQkJCQlzMjMuMy0xMC41LDIzLjMtMjMuM2MwLTAuOSwwLjctMS43LDEuNy0xLjdzMS43LDAuNywxLjcsMS43QzUxLjctMTA3OCwzOS43LTEwNjYsMjUtMTA2NiBNMTAtMTExMWM0LjYsMCw4LjMsMy43LDguMyw4LjMNCgkJCQkJYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNWMtMi44LDAtNSwyLjItNSw1YzAsMC45LTAuNywxLjctMS43LDEuN3MtMS43LTAuNy0xLjctMS43DQoJCQkJCUMxLjctMTEwNy4zLDUuNC0xMTExLDEwLTExMTEgTTQwLTExMTFjNC42LDAsOC4zLDMuNyw4LjMsOC4zYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNQ0KCQkJCQlzLTUsMi4yLTUsNWMwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzMS43LTExMDcuMywzNS40LTExMTEsNDAtMTExMSBNMjUtMTEzNmMtMjIuMSwwLTQwLDE3LjktNDAsNDANCgkJCQkJczE3LjksNDAsNDAsNDBzNDAtMTcuOSw0MC00MFM0Ny4xLTExMzYsMjUtMTEzNiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMzIgLTMyIDgwIDgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDMyIC0zMiA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDk3Mi4wMDAwMDApIj4NCgk8ZyBpZD0iQW5zd2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMTEyLjAwMDAwMCkiPg0KCQk8ZyBpZD0iR3JvdXAtMTAiPg0KCQkJPGcgaWQ9IlBhZ2UtMS1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNS4wMDAwMDAsIDIwLjAwMDAwMCkiPg0KCQkJCTxwYXRoIGZpbGw9IiM3ODkwOUMiIGQ9Ik0yNS0xMDY2Yy0xNC43LDAtMjYuNy0xMi0yNi43LTI2LjdjMC0wLjksMC43LTEuNywxLjctMS43czEuNywwLjcsMS43LDEuN2MwLDEyLjksMTAuNSwyMy4zLDIzLjMsMjMuMw0KCQkJCQlzMjMuMy0xMC41LDIzLjMtMjMuM2MwLTAuOSwwLjctMS43LDEuNy0xLjdzMS43LDAuNywxLjcsMS43QzUxLjctMTA3OCwzOS43LTEwNjYsMjUtMTA2NiBNMTAtMTExMWM0LjYsMCw4LjMsMy43LDguMyw4LjMNCgkJCQkJYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNWMtMi44LDAtNSwyLjItNSw1YzAsMC45LTAuNywxLjctMS43LDEuN3MtMS43LTAuNy0xLjctMS43DQoJCQkJCUMxLjctMTEwNy4zLDUuNC0xMTExLDEwLTExMTEgTTQwLTExMTFjNC42LDAsOC4zLDMuNyw4LjMsOC4zYzAsMC45LTAuNywxLjctMS43LDEuN2MtMC45LDAtMS43LTAuNy0xLjctMS43YzAtMi44LTIuMi01LTUtNQ0KCQkJCQlzLTUsMi4yLTUsNWMwLDAuOS0wLjcsMS43LTEuNywxLjdjLTAuOSwwLTEuNy0wLjctMS43LTEuN0MzMS43LTExMDcuMywzNS40LTExMTEsNDAtMTExMSBNMjUtMTEzNmMtMjIuMSwwLTQwLDE3LjktNDAsNDANCgkJCQkJczE3LjksNDAsNDAsNDBzNDAtMTcuOSw0MC00MFM0Ny4xLTExMzYsMjUtMTEzNiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=");

    height:80px;
    width:80px;
    display:block;  
}

.img-smiley:hover{
    background:green;
}

Answer 2

图像的当前颜色是嵌入在图像编码中的东西，也是CSS无法了解的东西，所以为了更改它，你需要另一个base64图像和将其设置为背景。

假设base64中的绿色base64绿色图像为data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPS，您可以执行以下操作：

.img-smiley:hover {
    background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPS");
}

如果符合您的需要，请使用笑脸角色并相应地设计风格。像这样：

http://jsfiddle.net/Paulpro/wmZVB/5/

Answer 3

首先，您必须将SVG html标签或SVG图像编码为基本64格式。这是link，可从SVG转换为base64。

下一步，您必须将编码的base64设置为background-image属性。

例如：

background-image: url("data:image/svg+xml;base64,IDxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0iYm9yZGVyIiBkPSJNMTYgMS41QzI0LjAwODEgMS41IDMwLjUgNy45OTE4NyAzMC41IDE2QzMwLjUgMjQuMDA4MSAyNC4wMDgxIDMwLjUgMTYgMzAuNUM3Ljk5MTg3IDMwLjUgMS41IDI0LjAwODEgMS41IDE2QzEuNSA3Ljk5MTg3IDcuOTkxODcgMS41IDE2IDEuNVoiIHN0cm9rZT0iIzJGMkMyNiIgc3Ryb2tlLXdpZHRoPSIzIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0iYXJyb3ciIGQ9Ik0xOC4yODU3IDE2LjM4MUwxNC4yODU3IDIwLjAxTDE0LjI4NTcgMTIuNzUxOUwxOC4yODU3IDE2LjM4MVoiIGZpbGw9IiMyRjJDMjYiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICAgICAgPC9zdmc+"); width:32px; height: 32px; background-size:cover; background-repeat:no-repeat;

最后一步（悬停）：您必须通过更改SVG标签内路径的笔触和填充颜色将该SVG转换为base64。

EX：

background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggY2xhc3M9ImJvcmRlciIgZD0iTTE2IDEuNUMyNC4wMDgxIDEuNSAzMC41IDcuOTkxODcgMzAuNSAxNkMzMC41IDI0LjAwODEgMjQuMDA4MSAzMC41IDE2IDMwLjVDNy45OTE4NyAzMC41IDEuNSAyNC4wMDgxIDEuNSAxNkMxLjUgNy45OTE4NyA3Ljk5MTg3IDEuNSAxNiAxLjVaIiBzdHJva2U9IiNlZTNjMTUiIHN0cm9rZS13aWR0aD0iMyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBjbGFzcz0iYXJyb3ciIGQ9Ik0xOC4yODU3IDE2LjM4MUwxNC4yODU3IDIwLjAxTDE0LjI4NTcgMTIuNzUxOUwxOC4yODU3IDE2LjM4MVoiIGZpbGw9IiNlZTNjMTUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L3N2Zz4="); width:32px; height: 32px; background-size:cover; background-repeat:no-repeat;

您可以尝试将此代码粘贴到HTML页面上并运行。

如何在SVG base64的悬停时改变颜色

3 个答案: