用純CSS生成隨機顏色（無javascript）？

是否可以用純CSS生成隨機顏色，而不使用JavaScript？這可能是不可能的，但我仍然好奇。用純CSS生成隨機顏色（無javascript）？

來源

2013-03-10 Arch1tect

這是不能做到的。 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是不可能的。

來源

2013-03-10 21:45:41

不是。動態只能在腳本支持下實現。

來源

2013-03-10 22:09:13

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

使用PHP

來源

2013-12-29 20:22:52 Jono

根據這個網站， http://blog.codepen.io/2013/08/26/random-function-in-sass/ 其可能的，但不是純CSS

來源

2014-06-08 06:26:25 Spycomb

與使用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，因爲現在它不是很好。

來源

2016-11-15 20:08:03

用純CSS生成隨機顏色（無javascript）？

回答

相關問題