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

Posted 2023-03-06

【中文标题】根据根背景图像或颜色反转文本颜色

【英文标题】：Invert text color based on root background image or color

【发布时间】：2018-03-18 14:01:16

【问题描述】：

这个问题的某些部分已经被覆盖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，然后在我的 html 标记中添加一个额外的类 .has-dark-background .但是，如果我有多个深色背景的页面和多个浅色背景的页面，有没有办法使用 jQuery 来根据 hero 对象反转文本颜色？

这是我发现的一个很好的 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 的解决方案吗？

对不起，我的英语不好。感谢您的帮助和时间。

【问题讨论】：

只用 CSS 就可以做到

@DanielH 你能解释一下吗？

我不认为你可以单独使用 css。您链接的问题是在将文本设置为黑色或白色之前使用 JS 确定颜色的亮度。 squarespace 使用的公式基本相同，但很难准确说出他们是如何确定背景颜色的开始的。

@worc 那么，我将创建一个 Rails 辅助方法并列出所有控制器和操作......无论如何，谢谢你的想法

【参考方案1】：

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

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

Class 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】：

这接近你想要的吗？

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>

【讨论】：

@Anthony***s 我认为要获得完全相反的颜色，您需要两张图像，一张是原始的，另一张是反转的，将文本设置为透明以显示反转的图像，这样您就可以实现您想要的，如果我能做一个，我可以试试。

并非如此，因为wrapper 和text 是同一个“对象”。我正在尝试制作单独的导航栏，该导航栏将在每个页面上呈现并根据当前页面内容反转其颜色。例如，主页有一个主图，那么导航栏链接将是白色的，而关于页面没有一个深色主图，导航栏链接不会反转并保持黑色

这是一个很高的要求。英雄图像不一定都是一种颜色。 squarespace 的英雄图片实际上只是PNG images with everything except the foreground objects removed。这给了他们足够的空白，以免这些对象与文本重叠。英雄图像没有可比较的颜色。背景颜色是独立于主图的决定。

在这里，Squarespace 在管道中内置了图像颜色检测，让您可以访问图像的平均颜色，每个角落和中间。要获得类似的结果，您需要通过 Color Thief 之类的库处理图像，然后使用该信息确定颜色是浅色还是深色 - TinyColor 非常适合。