根据根背景图像或颜色反转文本颜色
Invert text color based on root background image or color
这个问题的某些部分已经涵盖了 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 标签中添加一个额外的 class .has-dark-background
。但是,如果我有多个深色背景页面和多个浅色背景页面,有什么方法可以使用 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 或 Rails 上的 Ruby 的其他解决方案?
对不起,我的英语不好。感谢您的帮助和时间。
这接近你想要的吗?
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>
这是我想出的答案。我为我的导航栏创建了一个辅助方法:
# 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")
...
这个问题的某些部分已经涵盖了 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 标签中添加一个额外的 class .has-dark-background
。但是,如果我有多个深色背景页面和多个浅色背景页面,有什么方法可以使用 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 或 Rails 上的 Ruby 的其他解决方案?
对不起,我的英语不好。感谢您的帮助和时间。
这接近你想要的吗?
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>
这是我想出的答案。我为我的导航栏创建了一个辅助方法:
# 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")
...