相对于其后面的图像的文本颜色

时间:2013-04-17 13:57:05

标签: javascript jquery css colors

我有一种强烈的感觉,这是不可能的 - 但这就是我在这里的原因。

我的网站在主页上有一个全屏幻灯片,并且标题包含透明背景和深色文本/内容。问题是,在较暗的图像上,您无法看到内容,因为它也是黑暗的。

显然我可以给div一个背景,但这不是设计所要求的。

有什么方法可以让文字相对于背景着色,可能是“反转”颜色效果或类似的东西?

提前致谢

2 个答案:

答案 0 :(得分:3)

  1. 将信息存储在文件名中(最简单) - 例如image1_light.png,imagex_dark.jpg并查看_light或_dark。 OR

  2. How to pick good contrast RGB colors programmatically?

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

  4. 要查看的演示是http://www.script-tutorials.com/demos/158/index.html,您需要确定文本的位置并查看文本下的主要颜色

    $(".navigation").position()是{top:30,left: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
    
    });
    

答案 1 :(得分:0)

你可以通过蛮力来做到这一点。确定自己要为每个图像放置的文本颜色,然后根据新图像的名称在图像更改时使用Javascript设置颜色。当然,这意味着如果您更改了任何图像,您也必须更改Javascript。