Question

我正在尝试根据背景（在rgb和rgba中）颜色更改文本颜色。我必须使用rgb，但无法弄清rgba的颜色。这是我的代码-

var rgb = this.css('background-color');
var pattern = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.*\d+)?\)$/;
var matches = rgb.match(pattern);
var colorValue = Math.round(((parseInt(matches[1]) * 299) + (parseInt(matches[2]) * 587) + (parseInt(matches[3]) * 114)) /1000);

if (colorValue > 125) {
    this.css('color', '#444444');
} else if (parseInt(matches[4]) < 0.5) {
    this.css('color', '#444444');
} else {
    this.css('color', 'white');
}

我找不到

中的错误

else if (parseInt(matches[4]) < 0.5) {
    this.css('color', '#444444');
}

感谢您的帮助。

Answer 1

这是基于

的Java for andeiod解决方案

// Put this method in whichever class you deem appropriate // static or non-static, up to you. public static int getContrastColor(int colorIntValue) { int red = Color.red(colorIntValue); int green = Color.green(colorIntValue); int blue = Color.blue(colorIntValue); double lum = (((0.299 * red) + ((0.587 * green) + (0.114 * blue)))); return lum > 186 ? 0xFF000000 : 0xFFFFFFFF; } // Usage // If Color is represented as HEX code: String colorHex = "#484588"; int color = Color.parseColor(colorHex); // Or if color is Integer: int color = 0xFF484588; // Get White (0xFFFFFFFF) or Black (0xFF000000) int contrastColor = WhateverClass.getContrastColor(color);

if (!empty($date)) {
    $timestamp = strtotime($date);
    if ($timestamp === FALSE) {
         $timestamp = strtotime(str_replace('/', '-', $date));
     }
         $date = date('Y-m-d', $timestamp);
  }

Answer 2

我建议使用更好的RegExp：^rgba$(\d*)\,\s?(\d*)\,\s?(\d*),\s?([01]?\.?\d*?)$$

我们知道Alpha值在0到1之间，因此我们可以寻找0.00，.25，1或1.00。请考虑以下内容。

$(function() {
  function changeTextColor(obj) {
    var rgb = obj.css('background-color');
    var pattern;
    if (rgb.slice(0, 4) == "rgba") {
      pattern = /^rgba\((\d*)\,\s?(\d*)\,\s?(\d*),\s?([01]?\.?\d*?)\)$/;
    } else {
      pattern = /^rgb\((\d*)\,\s?(\d*)\,\s?(\d*)\)$/;
    }
    var matches = rgb.match(pattern);
    var red = parseInt(matches[1]);
    var green = parseInt(matches[2]);
    var blue = parseInt(matches[3]);
    var alpha = parseFloat(matches[4]) || -1;
    console.log(matches, red, green, blue, alpha);
    var colorValue = Math.round(((red * 299) + (green * 587) + (blue * 114)) / 1000);

    if (alpha >= 0) {
      if (alpha < 0.5) {
        console.log("RGBA", colorValue);
        obj.css('color', '#444444');
      }
    } else {
      if (colorValue > 125) {
        console.log("RGB 1", colorValue);
        obj.css('color', '#444444');
      } else {
        console.log("RGB 2", colorValue);
        obj.css('color', 'white');
      }
    }
  }

  $("button").click(function() {
    changeTextColor($("#box-1"));
    changeTextColor($("#box-2"));
  });
});

.color {
  width: 200px;
  height: 200px;
  background-color: rgb(20, 20, 20);
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="display: block;">Go</button>
<div id="box-1" class="color">
  Text 1
</div>
<div id="box-2" class="color" style="background-color: rgba(50,100,200,.25);">
  Text 2
</div>

希望有帮助。

Answer 3

在@Patrick Roberts，@ SpazzMarticus和@Twisty的评论的帮助下，我现在开始工作了。这是完整的工作代码。

var rgb = this.css('background-color');
var pattern = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.*\d+)?\)$/;
var matches = rgb.match(pattern);
var colorValue = Math.round(((parseInt(matches[1]) * 299) + (parseInt(matches[2]) * 587) + (parseInt(matches[3]) * 114)) /1000);

var colorOpacity = '';
if (matches[4]) {
    var colorOpacity = matches[4].replace(', ','');
}

if (colorValue > 125 || parseFloat(colorOpacity) < 0.5) {
    this.css('color', '#444444');
}
else {
    this.css('color', 'white');
}

如何根据rgb和rgba背景色更改文本颜色？

3 个答案: