Q&A
JavaScriptでaタグの中のimgを丸ごと置換...とかでしょうか？
制作中のサイトのヘッダ部分(width:100%; height:144px; background-color:rgba(0,0,0,0.6);)に
・ロゴマーク: 左上にabsoluteして表示
・メニューボタン: 右上にabsoluteして表示
・重要項目へのショートカット: メニューボタンのちょっと右にinline-blockで並べる
を、それぞれ白抜きで表示しています。
これらのうち、ショートカットのみを文字で表示して、残り2つは画像(透明部分があるpng)を置いています。
HTML
1<body> 2<header> 3 <h1><a href="https://example.com/"><img src="https://example.com/images/logo.png" alt="○○○○" /></a></h1> 4 <nav id="header-navi"> 5 <ul> 6 <li><a href="https://example.com/article01/">ショートカット3</a></li> 7 <li><a href="https://example.com/article02/">ショートカット3</a></li> 8 <li><a href="https://example.com/article03/">ショートカット3</a></li> 9 </ul> 10 </nav> 11 <nav id="icon_menu_open" class="menu_open"><a href="#!" title="メニューを開く"><img src="https://example.com/images/menu-icon.png" alt="メニューを開く" /></a></nav> 12</header> 13 14.... 15 16</body>
これらのクリックできる項目のうち、header nav#header-navi ul liにはa:hover時に文字色が変わる処理をかけてあります。
白抜き画像で表示している残り2項目について、a:hover時に画像の色を(例えば#ff0030とかに)変化させるには、どのようなCSSを書けば良いでしょうか？
黒い画像に明度と彩度を与える、もしくは色のついた画像を白や黒にする例は「png 色を変える css」などで検索すると沢山出てくるのですが、白→他の色にうまく応用できず困っております。
回答2件
0
ベストアンサー
その参考にしたところがこのページなら
ちょっとinvertの数値いじっただけで難なくできましたよ
やってることは
- invertで画像を最終的に欲しい色の輝度に合わせたグレーにする
- sepiaでセピアにして色相を34あたりにする
- saturateで最終的に欲しい色に合わせて彩度を上げる
- hue-rotateで色相を変えて目的の色に
- brightnessとcontrastで微調整
元画像が白か黒かであれば1のところしか違わないです
狙ったhexカラーに合わせるのはかなり難しそうではありますが・・・
inline svgであれば色を指定するのは簡単なので
そちらも選択肢にしてみては
投稿2020/04/06 05:55
編集2020/04/06 06:11
総合スコア7819
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/06 08:32