1

I can make a translucent background, but is there a way to add multiple translucent backgrounds to one element? Or do I need to multiply the values myself (and if I need to multiply the values myself, what formula would you suggest?) and set one background color?

You can set multiple background images...

Community
  • 1
  • 1
jedierikb
  • 12,752
  • 22
  • 95
  • 166

3 Answers3

4

You can only set one background colour for an element.

I would recommend that you combine the values you need and put the calculated value in the css file, but if that won't work, another option would be to created a nested set of elements and set a background colour for each of them. eg

<div class="background1">
    <div class="background2">
        stuff
    </div>
</div>
Rik Heywood
  • 13,816
  • 9
  • 61
  • 81
  • can't pre-process the colors -- being determined on the fly.. and also embedding the elements into a stack is a nice idea, but will get complicated as colors are coming and going on the fly. Would require lots of popping of elements up the tree. Doable... but a lot of overhead. – jedierikb Jul 26 '12 at 15:30
2

Yes, with CSS3

Using CSS3 gradient calls to make "non-gradient" solid colors will give you multiple background colors with transparency capability. Here's two solid colors at 50% transparency overlaid (see a fiddle):

.layeredBkg {
    background-image: -o-linear-gradient(left , rgba(46,227,255.5) 0%, rgba(46,227,255,.5) 100%), -o-linear-gradient(left , rgba(196,48,255.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -moz-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -moz-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -webkit-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -webkit-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -webkit-gradient(linear,left top, right top, color-stop(0, rgba(46,227,255,.5)), color-stop(1, rgba(46,227,255,.5))), -webkit-gradient(linear,left top, right top, color-stop(0, rgba(196,48,255,.5)), color-stop(1, rgba(196,48,255,.5)));
    background-image: -ms-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -ms-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#882ee3ff', endColorstr='#882ee3ff'), progid:DXImageTransform.Microsoft.gradient(startColorstr='#88c430ff', endColorstr='#88c430ff');
}
ScottS
  • 71,703
  • 13
  • 126
  • 146
0

Since you can have multiple background images, thinking to use solid-color images as backgrounds and apply alpha to them.

Community
  • 1
  • 1
jedierikb
  • 12,752
  • 22
  • 95
  • 166