简单的颜色变化 [英] Simple Color Variation
问题描述
我创建了一个UI,用户可以在其中更改其网页的颜色值。我想要的是采取分配给他们的背景颜色和减轻一定量的值。我只是想实现一个亮点行,而不必每次都制作新的图像。
I am creating a UI in which users have the ability to change color values of their pages. What I would like is to take the value assigned to their background color and lighten it a certain amount. I am just looking to achieve a highlight line without having to make new images every time.
示例:用户将背景颜色设置为#ECECEC。现在我想要一个特定的元素边框变成#F4F4F4(颜色更接近白色)。
Example: The user set the background color to #ECECEC. Now I want a certain elements border to become #F4F4F4 (A color closer to white).
请让我知道如果他们是一个很好的办法, PHP或者甚至jQuery。
Please let me know if their is a good way to do this with Javascript, PHP, or even jQuery.
推荐答案
一个更简单的解决方案是在CSS中使用rgba >
A simpler solution could be to use the rgba() color constructor in CSS:
border: 1px solid rgba(255,255,255,0.7)
这将创建一个70%不透明度的白色边框。不幸的是,这不支持在Firefox 2,Opera 9或任何版本的IE。为这些浏览器创建替代版本并不难。 jQuery示例:
This would create a white border of 70% opacity. Unfortunately, this is not supported in Firefox 2, Opera 9, or any version of IE. It wouldn't be difficult to create alternate versions for these browsers. jQuery example:
$('body').append('<div id="rgbatest" style="color:rgba(0,0,0,0);position:absolute;visibility:hidden"> </div>"');
if(!$('#rgbatest').css('color').match(/^rgba/)){
$('body').addClass('no-rgba');
}
$('#rgbatest').remove();
从这里,您可以使用.no-rgba类覆盖rgba颜色。
From here, you can use the .no-rgba class to override rgba colors.
#thisDiv{border: 1px solid rgba(255,255,255,0.7)}
.no-rgba #thisDiv{border: 1px solid #FFF}
这篇关于简单的颜色变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!