随机背景色和前景色搭配问题
背景色和前景色如果都随机获取，怎么做才能得到较为理想的效果，需要考虑的因素很多。其中，对比度是首要考虑的问题，这是解决文本辨析度的关键；其次，提升阅读舒适性，至少在视觉上基本符合 WCAG（网络内容无障碍指南）提出的标准。以下演示基于上述两个因素实现，具体思路是：使用 HSL颜色模型 获取配套的随机
<style>
#mydiv {
margin: 20px auto;
width: 800px;
height: 300px;
border: 1px solid gray;
display: grid;
place-items: center;
font-size: 5em;
}
</style>
<div id="mydiv">Hello CSS!</div>
<script>
const setBgAndColor = (elm) => {
const hue = Math.floor(Math.random() * 360);
const isDarkBg = Math.random() > 0.5; // 随机深、浅色背景
const bg = isDarkBg
? `hsl(${hue}, 100%, 20%)` // 深色背景
: `hsl(${hue}, 100%, 90%)`; // 浅色背景
const color = isDarkBg
? `hsl(${hue}, 30%, 90%)` // 浅色前景
: `hsl(${hue}, 80%, 20%)`; // 深色前景
elm.style.backgroundColor = bg; // 背景色
elm.style.color = color; // 前景色
};
setBgAndColor(mydiv); // 页面打开时上色
mydiv.onclick = () => setBgAndColor(mydiv); // 单击元素变换颜色
</script>
以上只是一个粗糙的方案，灵感来自于和一位做平面设计的朋友的一场谈话。
发表评论:
评论列表 [1条]
#1 | 小白 于 2025-12-15 18:00 发布: 背景点击变色，之前做小白贴的时候是有做过极简单版的，这个复杂多了
