用纯CSS生成随机颜色（无javascript）？

问题描述：

是否可以用纯CSS生成随机颜色，而不使用JavaScript？这可能是不可能的，但我仍然好奇。用纯CSS生成随机颜色（无javascript）？

这是不能做到的。 CSS非常静态。 – Bart 2013-03-10 21:41:45

http://stackoverflow.com/questions/476276/using-javascript-in-css – Blender 2013-03-10 21:43:11

@Blender尽管这不是纯粹的* CSS。 – Boaz 2013-03-10 21:44:04

答

我找到你的东西here，但它使用PHP。我认为用普通的CSS是不可能的。

答

不是。动态只能在脚本支持下实现。

答

<body style='background-color:<?php printf("#%06X\n", mt_rand(0, 0x222222)); ?>'>

使用PHP

答

根据这个网站， http://blog.codepen.io/2013/08/26/random-function-in-sass/ 其可能的，但不是纯CSS

与使用PHP几乎相同，只是这次他们使用Ruby。 – 2014-07-17 02:33:07

答

这是不是真的有可能在纯CSS。

但是，使用SASS（example）或LESS（example）等预处理器可以为您生成随机颜色，因为它们是使用脚本语言构建的。

一面可以帮助读者在未来的使用CSS variables的可能性。我们可以说

element { 
    --main-bg-color: brown; 
}

声明一个CSS变量和使用它像这样：

element { 
    background-color: var(--main-bg-color); 
}

现在，我们可以用改变它JS：

// From http://stackoverflow.com/a/5365036/2065702 
var randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 

document.documentElement.style.setProperty('main-bg-color', randomColor);

或者你可以使用一个完全不同的选择随机颜色的方式（如用户输入）。这允许像主题一样的可能性。你必须考虑的一件事是browser support，因为现在它不是很好。

用纯CSS生成随机颜色（无javascript）？

相关推荐