我想使用Tailwind CSS创建响应式导航栏，并遵循本指南
https://youtu.be/ZT5vwF6Ooig?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&t=74
不幸的是，SVG路径没有链接，所以我只有
<button>
<svg class="h-6 w-6 text-gray-700 fill-current" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="... the missing svg path ..." />
</svg>
</button>
因此，我尝试通过外部svg自行执行此操作。出于测试目的，我正在使用此svg
https://www.iconfinder.com/icons/3324998/menu_icon
由于svg没有src标签，因此我决定将其嵌入img标签中。我目前有
img {
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMyIgeDI9IjIxIiB5MT0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSI2IiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSIxOCIgeTI9IjE4Ii8+PC9zdmc+");
}<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
<button>
<img class="h-6 w-6 text-red-700" />
</button>我希望图像为红色，但仍为黑色。我该如何固定颜色？此外，我不确定是否需要更多属性。也许我不必将其嵌入图像标签中，而其他解决方案更合适？
提前致谢
我认为您无法通过CSS修改图片颜色。
不要使用img标签，而是尝试执行类似的操作，以便您可以轻松更改jmenu颜色：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 35px;
height: 5px;
background-color: red; /* Here you can change your background color */
margin: 6px 0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>编辑：
在这篇文章中，我也找到了解决您问题的好方法：
在这里您可以看到仅使用CSS过滤器的演示。
.filter-red{
filter: invert(47%) sepia(98%) saturate(7304%) hue-rotate(352deg) brightness(108%) contrast(130%);
}<img src="https://cdn4.iconfinder.com/data/icons/feather/24/menu-512.png" class="filter-red">本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句