jquery - CSSの色の可視性の問題

Question

これは非常に奇妙な質問のように思えますが、次の問題があります。

ご覧のとおり、画像が暗い色の場合、ページネーションははっきりと表示されません。

下の画像の色に応じてページネーションの色を変更したい。

これはrgb/cssで可能ですか？代わりにJavascriptとは？

Answer 1

たとえば、50% rgba を使用できます。

element {
color: rgba(255,255,255,0.5);
}

これにより、フォントが白になり、不透明度が 50% に設定されます。次の方法でも同じ効果が得られます。

element {
opacity: 0.5;
color: rgb(255,255,255);
}

最初の方法はまだすべてのブラウザーでサポートされているわけではないことに注意してください。

ページネーションが白い背景で隠れないようにするには、テキスト シャドウを使用できます。

element {
text-shadow: 0px 1px 3px #000;
}

（こちらをご覧ください）

Answer 2

画像に値を保存できる場合は、data-*-attributeを使用できます。

// images that are dark gets the new attribute
<img src="" alt="">
<img src="" alt="" data-invert="true">

// let's say this is you pagination
<nav id="pagination">
    // your pagination elements
</nav>

スライド機能を更新できるよりも（これは単なる擬似コードです）：

function slide() {
    // lets say you know the current image and there's an array of images
    var current = 1;
    if ('true' == images.eq(current).attr('data-invert') {
        $('pagination').addClass('invert');
    } else {
        $('pagination').removeClass('invert');
    }
}

そして、クラスinvertは、暗い画像によく似合う明るい配色を持っています。

Answer 3

JS を使用するのではなく、別の設計アプローチを作成することをお勧めします。borderすべての背景で機能する明るいグレーの色合いを追加してみてください。このデモを参照してください:

http://jsfiddle.net/fqZf4/3/

Answer 4

テキストに灰色のテキストの影を付けます。それは完全に機能します。