Home/ Questions/Q 8311527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T19:50:35+00:00

I can make a translucent background , but is there a way to add

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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');
}
    • 0