Generowanie losowego koloru za pomocą czystego CSS (bez javascript)?

Czy można wygenerować losowy kolor za pomocą czystego CSS i bez używania javascript? To prawdopodobnie niemożliwe, ale nadal jestem ciekawy.Generowanie losowego koloru za pomocą czystego CSS (bez javascript)?

Źródło

2013-03-10 Arch1tect

Nie można tego zrobić. CSS jest prawie statyczny. – Bart

http://stackoverflow.com/questions/476276/using-javascript-in-css – Blender

@Blender To w rzeczywistości nie jest * czysty * CSS. – Boaz

Znalazłem dla ciebie coś here, ale używa PHP. Myślę, że to niemożliwe z prostym CSS.

Źródło

2013-03-10 21:45:41

Niezupełnie. Dynamizm można wprowadzić tylko przy pomocy skryptów.

Źródło

2013-03-10 22:09:13

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

Używanie PHP

Źródło

2013-12-29 20:22:52 Jono

według tej strony, http://blog.codepen.io/2013/08/26/random-function-in-sass/ jego możliwe, ale nie z czystego css

Źródło

2014-06-08 06:26:25 Spycomb

Podobnie jak w PHP, tylko tym razem używają Ruby. –

nie jest to możliwe w czystym CSS.

Jednak użycie pre-procesora takiego jak SASS (example) lub LESS (example) może generować losowe kolory, ponieważ są one zbudowane przy użyciu języków skryptowych.

Jedna strona pamiętać, że może pomóc czytelnikom w przyszłości jest możliwość korzystania CSS variables. Możemy zadeklarować zmienną CSS mówiąc

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

i używać go tak:

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

Teraz możemy ją zmienić za pomocą 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);

Albo można użyć zupełnie inna sposób wybierania losowego koloru (np. wprowadzanie przez użytkownika). Pozwala to na takie możliwości jak motywy. Jedną rzeczą, którą musisz wziąć pod uwagę, jest browser support, ponieważ obecnie nie jest zbyt dobra.

Źródło

2016-11-15 20:08:03

Generowanie losowego koloru za pomocą czystego CSS (bez javascript)?

Odpowiedz

Powiązane problemy