请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
以上只是一个粗糙的方案,灵感来自于和一位做平面设计的朋友的一场谈话。
|