質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1958閲覧

白抜きpngにhoverで色を与えるには?

Cystidia

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/04/06 02:43

制作中のサイトのヘッダ部分(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」などで検索すると沢山出てくるのですが、白→他の色にうまく応用できず困っております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

その参考にしたところがこのページなら
ちょっとinvertの数値いじっただけで難なくできましたよ

やってることは

  1. invertで画像を最終的に欲しい色の輝度に合わせたグレーにする
  2. sepiaでセピアにして色相を34あたりにする
  3. saturateで最終的に欲しい色に合わせて彩度を上げる
  4. hue-rotateで色相を変えて目的の色に
  5. brightnessとcontrastで微調整

元画像が白か黒かであれば1のところしか違わないです
狙ったhexカラーに合わせるのはかなり難しそうではありますが・・・

inline svgであれば色を指定するのは簡単なので
そちらも選択肢にしてみては

投稿2020/04/06 05:55

編集2020/04/06 06:11
KazuhiroHatano

総合スコア7819

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cystidia

2020/04/06 08:32

ありがとうございます! 何か大きな勘違いをしていたようです。たしかに、簡単にできました...。
guest

0

画像の色をかえるなら画像を2枚用意して、入れ替えればよいのでは?

投稿2020/04/06 03:13

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cystidia

2020/04/06 03:22

JavaScriptでaタグの中のimgを丸ごと置換...とかでしょうか?
yambejp

2020/04/06 03:24

img のsrcを置換すれば十分でしょう
Cystidia

2020/04/06 08:34

早速のご返信ありがとうございました。 ご指摘の通り、丸ごと替える必要はありませんでした。srcのみで十分ですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問