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>
我应该如何将悬停时的颜色从原始颜色更改为绿色？
最佳答案
您好，不要使用 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;
}
关于css - 如何在 SVG base64 悬停时更改颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37204039/