简单的颜色变化

Question

我正在创建一个用户界面，用户可以在其中更改页面的颜色值。我想要的是获取分配给其背景颜色的值并将其变亮一定程度。我只是想获得一条亮点线，而不必每次都制作新图像。

示例：用户将背景颜色设置为#ECECEC。现在我希望某个元素边框变成#F4F4F4（接近白色的颜色）。

请让我知道他们是否是使用 Javascript、PHP 甚至 jQuery 来完成此操作的好方法。

Answer 1

一个更简单的解决方案可能是在 CSS 中使用 rgba() 颜色构造函数：

border: 1px solid rgba(255,255,255,0.7)

这将创建一个不透明度为 70% 的白色边框。不幸的是，Firefox 2、Opera 9 或任何版本的 IE 都不支持此功能。为这些浏览器创建替代版本并不困难。jQuery 示例：

$('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 颜色。

#thisDiv{border: 1px solid rgba(255,255,255,0.7)}
.no-rgba #thisDiv{border: 1px solid #FFF}