I am not sure how I would ask this question.
Here are 3 gradient backgrounds:
How would I have a random one load when the page loads?
How would I do that in the code? https://jsfiddle.net/mdjno3bL/
That is all I am trying to figure out how to do.
Is there a way to do that?
How would it be written without jQuery?
.play1 {
--color-a: orange;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play2 {
--color-a: purple;
--color-b: black;
--color-c: purple;
--color-d: black;
}
.play3 {
--color-a: green;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play1 {
--color-a: orange;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play2 {
--color-a: purple;
--color-b: black;
--color-c: purple;
--color-d: black;
}
.play3 {
--color-a: green;
--color-b: black;
--color-c: green;
--color-d: black;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body .bg {
content: "";
position: fixed;
/*z-index: 1;*/
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 165px 165px;
background-image:
linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(90deg, var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(90deg, var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(90deg, var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(90deg, var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(90deg, var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(90deg, var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(90deg, var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(90deg, var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(90deg, var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(90deg, var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(90deg, var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(90deg, var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(90deg, var(--color-b)70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(90deg, var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(90deg, var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(var(--color-a), var(--color-a));
}
<div class="bg play1 "></div>
Aucun commentaire:
Enregistrer un commentaire