I want to have one element with multiple background colors? Analog of:
<div class="multiplebackground">
<div style="background-color:red"></div>
<div style="background-color:green"></div>
<div style="background-color:blue"></div>
</div>
but if I have only 1 div with some text content:
<div class="multiplebackground">
...
</div>
.multiplebackground {
???
}
Or it is not possible?
You can achieve this with gradients. You just need to blend from a colour to the same colour, and then blend to the next colour across zero pixels and so on.
.Neapolitan {
height: 200px;
width: 200px;
background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%);
}<div class="Neapolitan">
</div>(Prefixed alternatives and IE specific code is available for older browsers)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments