Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Multiple background with multiple classes

CSS Multiple background with multiple classes

Problem

HTML :

Blue : If a gradient Background from transparent to blue

Red : If a gradient background from red to transparent

Why we can't do something like :

.blue {
   background: inherit , background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%);
}
.red {
   background: linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%) , inherit;
}

Instead of :

.blue {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%);
}

.red {
    background: linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%);
}

.blue.red {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(125,185,232,1) 100%) , linear-gradient(to right, rgba(255,10,10,1) 0%, rgba(255,255,255,0) 100%);
}

Thats ok if i use only 2 multiple classes, but if I have blue,red,yellow,black,white, bla bla bla.... so you know it bored.

I wonder how to use multiple background with multiple classes ?

Any CSS trick ?

Playground : http://jsfiddle.net/5gJyr/


Expand :

I will use inherit property, gives slot(s) for them

If i have more colors I will add them after like

.red {background: red,inherit,inherit;}
.blue {background: inherit,blue,inherit;}
.yellow {background: inherit,inherit,yellow;}

so I can add given multiple classes like

Problem courtesy of: l2aelba

Solution

Simply put, there is no 'easier way'

inherit works by taking the parent property

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

The only way to apply multiple background values is to concatenate them with a comma,

More from MDN

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

.myclass {
  background: background1, background 2, ..., backgroundN;
}
Solution courtesy of: SW4

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Multiple background with multiple classes

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×