请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
背景色和前景色如果都随机获取，怎么做才能得到较为理想的效果，需要考虑的因素很多。其中，对比度是首要考虑的问题，这是解决文本辨析度的关键；其次，提升阅读舒适性，至少在视觉上基本符合 WCAG（网络内容无障碍指南）提出的标准。以下演示基于上述两个因素实现，具体思路是：使用 HSL颜色模型 获取配套的随机深色背景+浅色前景或浅色前景+深色背景，其中：深色背景和浅色背景固定饱和度、亮度分别为 20%、90%，深色前景和浅色前景饱和度分别为30%、80%，亮度依次为90%、20%，代码如下，在线预览效果时可单击元素变换背景色和前景色：
<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>
以上只是一个粗糙的方案，灵感来自于和一位做平面设计的朋友的一场谈话。
| 
发表于 2025-12-6 12:44
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-12-6 19:07
