2

これはありえないと強く感じていますが、それが私がここにいる理由です。

ホームページに全画面スライドショーがあり、背景が透明でテキスト/コンテンツが暗いヘッダーがあるサイトがあります。問題は、暗い画像ではコンテンツも暗いため、コンテンツが表示されないことです。

明らかに、div に背景を与えることはできますが、これはデザインが要求するものではありません。

背景に対してテキストに色を付ける方法はありますか?おそらく「反転」カラー効果などですか?

前もって感謝します

4

2 に答える 2

4

  1. image1_light.png、imagex_dark.jpg などのファイル名で情報を保存します (最も簡単です)。_light または _dark を確認します。また

  2. プログラムで適切なコントラストのRGB色を選択する方法は?

  3. canvas/html5 JavaScript または jQuery を使用して、マウスが <img> または <div> 要素で特別に動いている場所で RGB カラーを取得するにはどうすればよいですか?

見るべきデモは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 に答える