更新

Question

此问题的某些部分已涵盖here。

我正在尝试创建一个导航栏，它位于所有元素之上：

controller.controller_name && controller.action_name

然后如果我的英雄是黑暗或在背景上有图像，则反转导航链接。滚动幻灯片时，Squarespace在主页上有一个很好的例子。

我在后端使用Ruby On Rails，我找到的解决方案之一是为我的导航栏创建一个帮助方法，我在其中定义.has-dark-background，然后添加一个额外的类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); }到我的HTML标签。但是，如果我有多个深色背景页面和多页浅背景，有什么方法可以使用jQuery基于英雄对象反转文本颜色？

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

{{1}}

上面的代码工作正常但它只能基于当前对象背景的文本颜色。

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

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

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

Answer 1

这接近你想要的吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

以下是我提出的答案。我为导航栏创建了一个帮助方法：

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

其中%w(pages)是控制器名称。然后，我在我的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")
...

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

2 个答案:

更新