简单的颜色变化 [英] 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">&nbsp;</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屋！