やりたいこと 黒のみで書かれている下記png透過画像をcssのみを利用して色変更させたい やったこと filterでがんばってもらう <hr> <div> <img src="/img/test.png"/>元画像 </div> <hr> <div class="red"> <img src="/img/test.png"/>赤 </div> <hr> <div class="green"> <img src="/img/test.png"/>緑 </div> <hr> <div class="blue"> <img src="/img/test.png"/>青 </div> <hr> .red { filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%)
![🖼【CSS】filterのみを使用して黒い画像を任意の色に変更する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/08130a20b07550d87e6cdd1606b4696adf277489/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUYwJTlGJTk2JUJDJUUzJTgwJTkwQ1NTJUUzJTgwJTkxZmlsdGVyJUUzJTgxJUFFJUUzJTgxJUJGJUUzJTgyJTkyJUU0JUJEJUJGJUU3JTk0JUE4JUUzJTgxJTk3JUUzJTgxJUE2JUU5JUJCJTkyJUUzJTgxJTg0JUU3JTk0JUJCJUU1JTgzJThGJUUzJTgyJTkyJUU0JUJCJUJCJUU2JTg0JThGJUUzJTgxJUFFJUU4JTg5JUIyJUUzJTgxJUFCJUU1JUE0JTg5JUU2JTlCJUI0JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz01ZWQwNTNkMjVjMzIyZjNiMWY4YjI5OTI5NGMwMzIzNA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBlbHRvY2llYXImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVjMDI3Yzk1MGYwNGQyYzE2NmE0NjhiZDM1ZmI3NjFj%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De085b9df007562e06c7d25862131e7e2)