Multiple background-color layers
Asked Answered
E

5

10

I wondered if it was possible to create two background-colors for a div an overlay them.

I want a white background-color so that the content below this div doesn't shine through and another rgba() color painted over this white to create lighter colors per script.

Electrophilic answered 18/2, 2015 at 19:19 Comment(4)
Why not immediately select the correct color? And as far as I know you can onl stack background images, not colours.Surfactant
Because I need to generate a lot of different light colors from my initial color...Electrophilic
You'll need to create/insert the different semi-transparent colours anyway... It's equal the work.Surfactant
No it is not! Trust me :)Electrophilic
D
28

Without understanding why you want this, it can be done by using solid color gradients: fiddle.

body {
    background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
                linear-gradient(white, white); /* first bg is on top of this */

}
Djerba answered 18/2, 2015 at 19:29 Comment(6)
@BramVanroy: Thanks -- this is also nice because all of the other background properties apply.Djerba
I still don't understand why the OP needs this though, why not immediately select the correct HEX color?Surfactant
Because selecting an single rgba color would allow the background of the parent so show through. The OP wants a single background color to eliminate the opacity then have an rgba color on top of that clean 'canvas'.Unmannerly
The bottom layer could simply be a background-color. You only need to use the gradient trick for additional layers.Darill
> Specifying multiple backgrounds is easy: > .myclass { background: background1, background2, /* … ,*/ backgroundN; } > Using multiple backgrounds - MdnShaunteshave
@Shaunteshave You can do background: background1, background2... with both the shorthand background property and the individual properties thereof except for background-colorExegetics
S
3

Though Adrift's answer is the way to go, you can also use pseudo elements for this.

body {
    background: white;
    position: relative;
}

body:before {
    content: "";
    position: absolute;
    top: 0;
    left; 0;
    width: 100%;
    height: 100%;
    background: rgba(220,14,120,0.5);
    z-index: 1;
}

/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */
body * {
    z-index: 2;
    position: relative;
}

Here is a fiddle.

However, this is not production friendly:

  • Setting position relative on body and all other elements when not necessary
  • Setting unnecessary z-index on all elements

The only upside this method has, is that it doesn't use gradients which, from a semantic standpoint, is more logical.

Surfactant answered 18/2, 2015 at 19:49 Comment(0)
A
1

You can't define two background-colors for one element, but you could overlay one coloured element on top of a white one in order to get a blending effect, while blocking out anything below them:

JSFiddle

HTML

<div class="one">
    <div class="two"></div>
</div>

CSS

div {
    width: 100px;
    height: 100px;
}

.one {
    background-color: #fff;
}
.two {
    top: 0;
    left: 0;
    background-color: rgba(0,0,255,0.2);
}
Anhwei answered 18/2, 2015 at 19:34 Comment(0)
W
1

To achieve multiple background colors in CSS, a common proposal is

  • Solid Color Gradients

But there is an alternative:

  • Solid Color background-images via SVG Data URIs

The working example below contains the following areas with the following background colors:

  • <main> - dark-gray
  • <section> - light-gray
  • <div class="circle"> - translucent red

In this set-up, we want to use the same theme-color for all the circles, rgba(255, 0, 0, 0.5) but we also want the circles inside the <section> to appear to have the same background-color as the circle outside <section>.

We can observe that, due to the application of the technique below to div.circle.does-not-blend - the rightmost of the two circles inside <section> - that circle ends up with the same apparent background-color as div.circle outside <section>.


The Approach

The approach is to give div.circle.does-not-blend:

  • the same initial background-color as <main>
  • an SVG Data URI background-image with the same translucent red background-color as the other .circle elements

The SVG background-image

The SVG Data URI background-image looks like this:

data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E

The Result

In the final result we see that the light-gray background-color of <section> does not bleed through and influence the final background-color of div.circle.does-not-blend


Working Example

main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 180px;
  padding: 0 9px;
  background-color: rgb(127, 127, 127);
  border: 1px solid rgb(0, 0, 0);
}

section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 0 0 66%;
  background-color: rgb(191, 191, 191);
  height: 162px;
}

.circle {
  display: inline-block;
  width: 120px;
  height: 120px;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 120px;
  background-color: rgb(255, 0, 0, 0.5);
  border-radius: 50%;
}

.circle.does-not-blend {
  background-color: rgb(127, 127, 127);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E');
}
<main>
  <div class="circle"></div>
  <section>
    <div class="circle">Incorrect</div>
    <div class="circle does-not-blend">Correct</div>
  </section>
</main>
Warnock answered 3/8, 2022 at 10:52 Comment(0)
L
0

To answer your question, yes there is a way. You can use a background image and a background color on the same div. Check out this SOF post.

Although I would consider a different method like this:

Structure:

<div class="parent">
    <div class="white"></div>
    <div class="color"></div>
</div>

CSS:

.parent {
    position: relative:
}
.white, .color {
    position:absolute;
    top: 0px;
    left: 0px;
}
.white {
    z-index: 9998;
}
.color {
    z-index: 9999;
}

You can mess around with the details here, but the overall idea is that your layer the divs on top of each other. The div with the higher z-index will be on top. Change their colors accordingly. The parent div being relative will keep the absolute divs inside of that container.

Lablab answered 18/2, 2015 at 19:28 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.