Гуглите text color based on background
Вот нагуглилось сразу
jsfiddle.net/QkSva
Вот с разными цветами:
codepen.io/iiil/pen/aDdlr
upd:
Сильно меня заинтересовал этот вопрос. Вроде бы поиск выдавал мне некоторые ответы, но рабочего примера я так и не смог найти.
В итоге решил написать все сам, используя
вот эту библиотеку. Она служит для определения основного и других цветов изображения.
Соответственно, определив цвет бэкграунда, мы легко получим цвет текста - используя пример выше.
Одно но, для примера пришлось выкладывать пример к себе, так как библиотека выдает ошибку безопасности, если использовать изображения из сети, поддерживаются только локальные файлы с сайта.
Ссылка на мое демо:
iiil.name/demo.htmlКод<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style>
div.imageblock {
width:500px;
height:400px;
background: url(/img/photo1.jpg);
}
</style>
</head>
<body>
<div class="imageblock">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend lacus elit, tempus iaculis velit tincidunt in. Praesent at volutpat magna. Quisque tempus, elit id placerat adipiscing, leo arcu porttitor mauris, et auctor nulla metus sit amet orci. Nullam nulla odio, viverra non nulla sit amet, fermentum gravida nisi. Nam in facilisis nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed lectus blandit, scelerisque risus id, sodales est. Cras sit amet volutpat leo, in commodo nulla. Nunc venenatis euismod pharetra. Nam porttitor eu nulla at condimentum. Duis ut varius risus, eget malesuada quam. Mauris id aliquam quam, sit amet interdum velit. Praesent eget tristique diam. Nullam scelerisque tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec at pulvinar leo, eu aliquet leo.
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://lokeshdhakar.com/projects/color-thief/js/color-thief.js"></script>
<script src="https://gist.githubusercontent.com/nrabinowitz/1104622/raw/1b25b36f055cb2a62ca12eca6d30ebd49874419b/quantize.js"></script>
<script type="text/javascript">
var image = new Image,
div = $('div.imageblock');
src = $(div).css('background-image').replace('url(','').replace(')','').replace(/\"/g,'');
image.src = src;
var colorThief = new ColorThief();
dominantColor = colorThief.getColor(image);
function isDark( color ) {
var match = color;
return ( match[1] & 255 )
+ ( match[2] & 255 )
+ ( match[3] & 255 )
< 3 * 256 / 2;
}
$('div').each(function() {
$(this).css("color", isDark(dominantColor) ? 'white' : 'black');
});
</script>
</body>
</html>
Соответственно, можно сильно доработать, во-первых, сделать, чтобы работало с несколькими изображениями (наверняка есть менее тяжелые библиотеки для определения цвета изображения). С другой стороны, определение нескольких цветом может помочь выбрать наиболее контрастный цвет для всех основных цветов изображения. Но это уже детали, и их писать Вам :)
Простой