2

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

我有一个网站，它的主页上有一个全屏幻灯片，一个带有透明背景和深色文本/内容的标题。问题是在较暗的图像上，您看不到内容，因为它也很暗。

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

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

提前致谢

4

2 回答 2

4

  1. 将信息存储在文件名中（最简单） - 例如 image1_light.png、imagex_dark.jpg 并查看 _light 或 _dark。或者

  2. 如何以编程方式选择对比度好的 RGB 颜色？

  3. canvas/html5使用 JavaScript 或 jQuery，如何在鼠标特别移动的地方获得 RGB 颜色 <img> 或 <div> 元素

要看的demo是http://www.script-tutorials.com/demos/158/index.html在这里你需要确定文字的位置，看看文字下面的主色是什么

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

我认为代码会是这样的

工作示例

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

});
于 2013-04-17T14:04:18.220 回答
0

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

于 2013-04-17T16:40:28.433 回答