19

色合いのような画像にオーバーレイを追加し、背景色を追加せずに不透明度を変更できるかどうかを調べようとしています。仕方がないので、ここで質問しようと思いました。
その不透明度で赤くしたいです。これが私がこれまでに持っているものです。

overlay.png を呼び出す必要がある場合にオーバーレイする画像を作成しましたが、必要かどうかはわかりません。

img.highlighted {
   opacity:0.4;
}

基本的に私はこれをやりたいのですが、逆に、ホバーしたときに画像が色合いを変えないようにします。
ここでチェックしてください
http://jsbin.com/igahay/3011/edit

4

5 に答える 5

19

CSS フィルター効果

これは完全なクロスブラウザーソリューションではありませんが、最新のブラウザーのほとんどでうまく機能する必要があります。

<img src="image.jpg" />
<style>
    img:hover {
        /* Ch 23+, Saf 6.0+, BB 10.0+ */
        -webkit-filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
        /* FF 35+ */
        filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
    }
</style>

外部デモプレイグラウンド

インハウス デモ スニペット (出典: simpl.info )

#container {
  text-align: center;
}

.blur {
  filter: blur(5px)
}

.grayscale {
  filter: grayscale(1)
}

.saturate {
  filter: saturate(5)
}

.sepia {
  filter: sepia(1)
}

.multi {
  filter: blur(4px) invert(1) opacity(0.5)
}
<div id="container">

  <h1><a href="https://simpl.info/cssfilters/" title="simpl.info home page">simpl.info</a> CSS filters</h1>

  <img src="https://simpl.info/cssfilters/balham.jpg" alt="No filter: Balham High Road and a rainbow" />
  <img class="blur" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur filter: Balham High Road and a rainbow" />
  <img class="grayscale" src="https://simpl.info/cssfilters/balham.jpg" alt="Grayscale filter: Balham High Road and a rainbow" />
  <img class="saturate" src="https://simpl.info/cssfilters/balham.jpg" alt="Saturate filter: Balham High Road and a rainbow" />
  <img class="sepia" src="https://simpl.info/cssfilters/balham.jpg" alt="Sepia filter: Balham High Road and a rainbow" />
  <img class="multi" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur, invert and opacity filters: Balham High Road and a rainbow" />

  <p><a href="https://github.com/samdutton/simpl/blob/gh-pages/cssfilters" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a></p>

</div>

ノート

リソース:

于 2013-07-18T11:45:10.177 に答える
3

あなたが示したものを逆にしたい場合は、これを行うことを検討してください：

.tint:hover:before {
    background: rgba(0,0,250, 0.5);

  }

  .t2:before {
    background: none;
  }

2枚目の写真の効果を見てください。

このように見えるはずですか？

于 2013-07-18T11:47:17.467 に答える
2

このようなもの？http://codepen.io/Nunotmp/pen/wKjvB

空divを追加して、絶対配置を使用できます。

于 2013-07-18T11:48:42.583 に答える
1

Webkit フィルターを試してみましたか?

不透明度だけでなく、色、明るさ、明るさ、その他のプロパティを操作できます。

于 2013-07-18T11:48:30.883 に答える