jquery - 根据根背景图像或颜色反转文本颜色

Question

这个问题的某些部分已经被涵盖here .

我正在尝试创建一个位于所有元素之上的导航栏，如下所示:

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

如果我的英雄是深色的或背景上有图像，则反转导航链接。 Squarespace当您滚动幻灯片时，他们的主页上有一个很好的示例。

我在后端使用 Ruby On Rails，我发现的解决方案之一是为我的导航栏创建一个辅助方法，在其中定义我的 controller.controller_name && controller.action_name，然后添加一个额外的类 .has-dark-background 到我的 html 标签中。但是，如果我有多个深色背景的页面和多个浅色背景的页面，有没有办法使用 jQuery 根据英雄对象反转文本颜色？

这是我发现的一个很好的 jquery 解决方案:

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);
}

上面的代码工作正常，但它只能根据当前对象背景反转文本颜色。

换句话说，我不想创建多个导航栏，我只想根据内容(英雄)背景颜色反转颜色。

还有其他基于 Jquery 或 Ruby on Rails 的解决方案吗？

请原谅我蹩脚的英语。感谢您的帮助和时间。

Answer 1

这是我想出的答案。我为导航栏创建了一个辅助方法:

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

其中 %w(pages) 是 Controller 名称。然后，我只是在我的 header 标记中使用了我的助手:

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

类has-dark-background通过其他样式手动将文本颜色更改为白色，而默认颜色为深色。不幸的是，这个方法不会像我想要的那样动态改变文本颜色。

更新

不确定这是否是最好的方法，但这是另一种方法:

# 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")
...