如何解决有没有一种方法可以生成与随机背景色形成对比的前景色文本和导航
我创建了一个随机背景生成器，该生成器从数组中选择随机颜色并为背景生成线性渐变。
有人可以帮助我提供代码，因为我不知道如何编写代码来生成对比鲜明的前景（文本和导航）。
我需要我的文本字体颜色和导航栏可以根据背景颜色自动更改为对比色。
我当前的JavaScript代码
function GetValue() {
var myarray = new Array("#ff0000","#ffe100","#95ff00","#2c8d94","#ad6428","#d46317","#0cc27c");
var randomColor1 = myarray.splice(Math.floor(Math.random() * myarray.length),1)[0];
var randomColor2 = myarray.splice(Math.floor(Math.random() * myarray.length),1)[0];
document.getElementById("message").innerHTML = randomColor1 + randomColor2;
return [randomColor1,randomColor2];
}
var styles = ["to right","to bottom right","-90deg"];
function applyChanges(randomColor1,randomColor2) {
var randomColor1 = GetValue();
var randomColor2 = GetValue();
var bg = "";
var style = Math.floor(Math.random() * styles.length);
bg = "linear-gradient(" + styles[style] + "," + randomColor1 + "," + randomColor2 + ")";
$("body").css("background",bg);
$("#myInput").text(bg);
}
function changeBg() {
var [randomColor1,randomColor2] = GetValue();
console.log(randomColor1,randomColor2);
applyChanges(randomColor1,randomColor2);
}
我当前的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>STARTING NOW</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css"
integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX"
crossorigin="anonymous"
/>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"
integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J"
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header_section">
<div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="container-fluid">
<img
src="d8282202e8adb36a20e88d27ffc3b15e.jpg"
alt="headerimage"
class="image"
/>
<div class="overlay">
<div class="text"><h3>I AM RAJ JAIN</h3></div>
</div>
</div>
<br />
<div>
<img src="IMG_3260.jpg" class="rounded-circle" alt="profile pic" />
</div>
<br />
<div id="description">
<h5>I am a full-stack web developer based in Melbourne,Australia</h5>
</div>
<div>
<hr class="line1" />
</div>
<div id="description">
<h3>Here's what i have done so far</h3>
</div>
<br />
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="afcg.png" id="evidence1" alt="afcg work" />
</div>
<div class="col-sm-4">
<h3 id="descrip1">Member's directory - Dynamic Wordpress Website</h3>
<p id="descrip2">
This is the directory I created during my IT Internship at Advanced
Fibre Cluster Geelong. This webpage is based on Wordpress.
</p>
</div>
</div>
</div>
<br />
<br />
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="wordminer.png" id="evidence1" alt="afcg work" />
</div>
<div class="col-sm-4">
<h3 id="descrip1">Wordminer app</h3>
<p id="descrip2">This is the Web app i created using html and css.</p>
</div>
</div>
</div>
<br>
<div>
<hr class="line1" />
<div/>
<div id="description">
<h3>My Photos</h3>
</div>
<br>
<div class="container">
<div class="row">
<div class="col">
<img src="geometric-1202611_640.jpg" alt="1st image" style="width: 200px; height: auto; padding: 3%;" />
</div>
<div class="col">
<img src="gingham-1525372_640.jpg" alt="2nd image" style="width: 200px; height: auto; padding: 3%;" />
</div>
<div class="col">
<img src="gold-992079_640.jpg" alt="3rd image" style="width: 200px; height: auto; padding: 3%;" />
</div>
<div class="col">
<img src="space-4257486_640.jpg" alt="4th image" style="width: 200px; height: auto; padding: 3%;" />
</div>
</div>
</div>
<input type="button" id="btnSearch" value="Search" onclick="changeBg();" />
<p id="message" ></p>
<p id="myInput"></p>
<script src="script.js" type="text/javascript"></script>
<script
src=”https://code.jquery.com/jquery-2.2.4.min.js"
integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=”
crossorigin=”anonymous”></script>
</body>
</html>
解决方法
根据十六进制颜色值，文本字体颜色可以反转为白色或黑色。您将在这里找到一个很好的解释此问题的解决方案：
Invert to white or black depending on background color
我在工作功能中与您共享代码。
function invertColor(hex,bw) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
var r = parseInt(hex.slice(0,2),16),g = parseInt(hex.slice(2,4),b = parseInt(hex.slice(4,6),16);
if (bw) {
// http://stackoverflow.com/a/3943023/112731
return (r * 0.299 + g * 0.587 + b * 0.114) > 186
? '#000000'
: '#FFFFFF';
}
// invert color components
r = (255 - r).toString(16);
g = (255 - g).toString(16);
b = (255 - b).toString(16);
// pad each with zeros and return
return "#" + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str,len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
编辑： 将此代码复制到您的javascript文件中。在您的“ applyChanges（）”函数中，添加以下代码行：
$("body").css("color",invertColor(randomColor1[1],true));
您可以将第二个参数发送为 false ，但是您正在创建渐变并使用相反的字体来更改字体颜色，这可能会产生一种不适合阅读的颜色。我选择的第一个参数是渐变中最暗的颜色，但是您可以测试发送阵列中的其他颜色。
希望这能解决您的问题！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。