当前位置: 首页 > 面试题库 >

使用JavaScript在CSS中生成较浅/较深的颜色

微生弘
2023-03-14
问题内容

假设我有#404040颜色代码。如何生成新的颜色代码,该颜色代码的明暗比为20%(或给定x%)?我需要它来在动态站点中生成悬停颜色(该颜色正在使用主题更改)。因此,不能将另一个类或:hover与预定义的类一起使用。

谢谢


问题答案:
var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    // Trim trailing/leading whitespace
    color = color.replace(/^\s*|\s*$/, '');

    // Expand three-digit hex
    color = color.replace(
        /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
        '#$1$1$2$2$3$3'
    );

    // Calculate ratio
    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
        // Determine if input is RGB(A)
        rgb = color.match(new RegExp('^rgba?\\(\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '(?:\\s*,\\s*' +
            '(0|1|0?\\.\\d+))?' +
            '\\s*\\)$'
        , 'i')),
        alpha = !!rgb && rgb[4] != null ? rgb[4] : null,

        // Convert hex to decimal
        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
            /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
            function() {
                return parseInt(arguments[1], 16) + ',' +
                    parseInt(arguments[2], 16) + ',' +
                    parseInt(arguments[3], 16);
            }
        ).split(/,/),
        returnValue;

    // Return RGB(A)
    return !!rgb ?
        'rgb' + (alpha !== null ? 'a' : '') + '(' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ) +
            (alpha !== null ? ', ' + alpha : '') +
            ')' :
        // Return hex
        [
            '#',
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ).toString(16), 2)
        ].join('');
};
var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};

// Use
var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

现在处理RGB(A)输入以及十六进制(3位数或6)。



 类似资料:
  • 问题内容: 我有一个iOS SKColor,我想将其转换为更浅的阴影(不透明,不透明/不透明),因此我想使用HSL亮度实现一个函数,该函数返回一个SKColor。即。在函数内部,将原始SKColor转换为等效的HSL,然后对HSL亮度应用一个值以获得较浅的颜色阴影,然后将此HSL颜色转换回我可以使用的SKColor。 问题答案: Xcode 8.2.1•Swift 3.0.2

  • 编辑原始问题以提供所有细节。 在web.xml中添加了以下内容: 在WEB-INF文件夹中创建了两个新文件wro.xml和wro.properties: wro.properties: wro.xml: 这里'resources'是里面的一个文件夹:src/main/webapp。 在/resources/skins/abc/文件夹中添加了一个文件testing.less: pom.xml文件包含

  • 问题内容: 我们在该网站上有一个庞大的应用程序,并且我们有一些链接,比如我们网站上的蓝色链接就是蓝色。现在,我想建立其他一些链接,但颜色要浅一些。显然,我可以简单地通过在CSS文件中添加十六进制代码来完成此操作,但是我们的站点允许用户确定其自定义配置文件/站点(例如Twitter)所需的颜色。 所以,我的问题是:我们可以按百分比减少颜色吗? 假设以下代码是CSS: 要么 有没有一种方法可以减少一定

  • 使用elementui,通过1个按钮修改深色浅色样式,深浅颜色怎么写?

  • 问题内容: 我在Java中有两个比较对象的集合。有没有一种方法可以比较集合,以便调用的方法而不仅仅是比较引用? 问题答案: 的每个孩子都这样做。查看文件 比较指定对象与此设置的相等性。如果给定对象也是一个集合,两个集合的大小相同,并且给定集合的每个成员都包含在此集合中,则返回true。这样可以确保equals方法可在Set接口的不同实现中正常工作。此实现首先检查指定的对象是否为此集合;如果是这样,

  • 我希望TPP是一个数组,每个阈值都有TPP值。打印应该是这样的:TPP是:n1,n2。。。