文字顏色相對於它後面的圖像

Question

我有強烈的感覺，這是不可能的 - 但這就是爲什麼我在這裏。

我有this site它在主頁上有一個全屏幕幻燈片放映。

問題是，在較暗的圖像上，您看不到標題或導航。

顯然我可以給div一個背景，但這不是設計師想要的（嘆氣）。

有沒有什麼方法可以使文字相對於背景變色，可能是'倒置'顏色的影響或類似的東西？

在此先感謝

Answer 1

1. 存儲在文件名中的信息（簡單） - e.g image1_light.png，imagex_dark.jpg並期待在_light或_dark。 OR

2. How to pick good contrast RGB colors programmatically?

3. 帆布/ HTML5 Using JavaScript or jQuery, how can I get the RGB color where ever the mouse is moving specially in <img> or <div> elements

看就是http://www.script-tutorials.com/demos/158/index.html，你需要確定文本的位置，看到主色是什麼下的文字演示

$(".navigation").position()是{頂：30，左：381}
$(".navigation").width())是214
$(".navigation").height())是68

我想代碼將是這樣的

WORKING EXAMPLE

var ctx,canvas; 
$(function(){ // on page load, this should likely be on image transition 

    // creating canvas object in memory. 
    // Since I do not append it anywhere it is not rendered 
    canvas = $("<canvas/>")[0]; // a jQuery object on its own does not work 
    ctx = canvas.getContext('2d'); 

    var image = new Image(); // create an image object in memory 
    image.onload = function() { 
     // resize 
     canvas.width=this.width; 
     canvas.height=this.height; 
     // render the image on the canvas 
     ctx.drawImage(image, 0, 0); 
     var nav = $(".navigation"); // get the navigation container 
     // find a pixel about in the middle where the navigation would be 
     var pos = {left: nav.position().left+(nav.width()/2), top: nav.position().top+(nav.height()/2) } 
     var pixel = ctx.getImageData(pos.left,pos.top, 1, 1).data; 
     $canvas=null; // no longer need this canvas 
     var invertedPixelColor = "rgba("+(255-pixel[0])+", "+(255-pixel[1])+", "+(255-pixel[2])+", "+1+")"; // invert it, ignoring the alpha channel 
     nav.css("color",invertedPixelColor); // set the nav text to inverted color 
     // here you could save the colour and reuse it 
     // if the user navigates to the same image 
    } 
    image.src = $(body).css('background-image'); // load the image, triggering the calc 

}); 

Answer 2

您可以通過蠻力去做。確定自己要爲每幅圖像添加什麼顏色的文本，然後在基於新圖像的名稱改變圖像時使用JavaScript設置顏色。當然，這意味着如果你改變了任何圖像，你也必須改變Javascript。