CSS цвета видимость проблема

Question

Это будет казаться очень странным вопросом, но у меня есть следующая проблема:

Как вы можете видеть, когда изображение является более темным цветом, нумерация страниц Безразлично Я не знаю.

Я хочу изменить цвет страницы в зависимости от цвета изображения ниже.

Возможно ли это с помощью rgb/css? Альтернативно с Javascript?

Answer 1

Я предлагаю вам сделать другой подход к дизайну, а не использовать JS. Попробуйте добавить border со светлым оттенком серого, который будет работать на каждом фоне. Смотрите эту демо:

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

Answer 2

Вы можете использовать 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; 
} 

(см here)

Answer 3

Если вы можете сохранить значение с изображением вы можете использовать data-* атрибута по:

// 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 4

Дайте серый текст тени вашему тексту. Он будет работать отлично.