根据根背景图片或颜色反转文本颜色

Question

some parts of this question have already been covered here .

I am trying to create a navigation bar that goes on top of all elements like this:

<div class="navbar">
  ...links...
</div>
<div class="hero-with-image">
  <h1>Hello</h1>
</div>

And then invert navigation links if my hero is dark or has an image on the background. Squarespace has a good example on their home page when you scroll slides.

I am using Ruby On Rails for my back end and one of the solutions I found is to create a helper method for my navigation bar where I define my controller.controller_name && controller.action_name and then add an extra class .has-dark-background to my html tag. But what if I have multiple pages with dark background and multiple pages with light background, is there any way to invert text color based on hero object using jQuery?

Here is a good solution for jquery that I found:

var rgb = [255, 0, 0];

// randomly change to showcase updates
setInterval(setContrast, 1000);

function setContrast() {
  // randomly update
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // http://www.w3.org/TR/AERT#color-contrast
  var o = Math.round(((parseInt(rgb[0]) * 299) +
                     (parseInt(rgb[1]) * 587) +
                     (parseInt(rgb[2]) * 114)) / 1000);
  var fore = (o > 125) ? 'black' : 'white';
  var back = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', fore); 
  $('#bg').css('background-color', back);
}

The code above works fine but it can only inver text color based on the current object background.

In other words I do not want to create multiple navigation bars, I just want to invert colours based on the content (hero) background color.

Is there any other solution based on Jquery or Ruby on Rails?

Excuse me for my broken English. Thank you for your help and time.

Answer 1

Is this close to what you want?

 div { width: 200px; height: 200px; } .text { mix-blend-mode: difference; color: white; } .wrapper { background: url(http://lorempixel.com/400/400/); } 

 <div class="wrapper"> <div class="text">This is my text, hellow World! This is my text, hellow World! This is my text, hellow World! This is my text, hellow World!</div> </div> 

Answer 2

Here is the answer that I came up with. I created a helper method for my navigation bar:

# helpers/application_helper.rb
def color_attr
  if %w(pages).include?(params[:controller])
    return 'has-dark-background'
  end
end

Where %w(pages) is a controller name. Then, I just used my helper inside my header tag:

# haml syntax
%header(class="#{color_attr} other-classes" role="banner")

Class has-dark-background manually changes text color to white with additional styles whereas default colors dark. Unfortunately, this method will not change text color dynamically as I wanted.

Update

Not sure if this is the best way of doing it but here is another way:

# about.html.erb
- content_for :navbar_class, 'new_class_1 new_class_2 ...'

# _navbar.html.erb
...
  %header(id="navbarPrimary" class="navbar #{content_for :navbar_class}" role="navigation")
...