24

私はフィールドの背景を持っています。下がグリーン、上がグレーです。背景の上にテキストがあります。テキストが背景の色を「感知」し、フォントに色を付けてコントラストを付ける方法はありますか?

たとえば、灰色の空の上のテキストはより明るくなり、緑のフィールド上のテキストはより暗くなり、見やすくなります。

私はこれについてかなり遠くまで到達しているかもしれませんが、どんな提案も大歓迎です。（フォントの色を手動で変更するための答えを探しているわけではないことに注意してください。）

4

1 に答える 1

29

他の方法よりも実験として:

背景継承を使用してテキストを設定し、ベースの背景を取得します。次に、それをテキストにクリップし、いくつかのフィルターを適用します。

.test {
    width: 800x;
    height:220px;
    font-size: 200px;
    background-image: url(bosque.jpg); 
    color: white;
    position: relative;
}

.inner {
    position: relative;
    background-image: inherit;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-filter: invert() sepia();
}

フィドル

(Webkit でのみ動作)

これもチェックしてください：

アニメ化された狂気

コントラスト アニメーション

更新: これを処理する新しい方法があります。を使用したデモを見るmix-blend-mode: difference

div {
  font-size: 300px;
  color: gray;
  mix-blend-mode: difference;
}
body {
  background-image: url(http://placekitten.com/900/600);
}
<div>TEST</div>

于 2014-01-23T17:52:09.310 に答える