CODEWITHSUNDEEP
css
D Park
D Park

Reputation: 514

Is there a way to overlay another color on top of background color in CSS?

I want to add rgba(0,0,0,0.25) on top of backgroundColor: "#0075FF" to make it darker. However is there any way to achieve it without using a mixed color value? Note: I also would like to avoid an approach that has an overlaid element on top of it.

Upvotes: 0

Views: 5205

Answers (4)

A.D.Schmidt
A.D.Schmidt

Reputation: 83

You can always make a separate container, place the elements in it, then in css make the new container the same size as the one you want to place on the other. I used a low opacity so you can see through the top color, making it look purple when it isn't. You gain adjust the size of the container and then use placement methods as you wish.

.main {
  width: 200px;
  height: 200px;
  background: red;
  }
  
  .img {
    background-color: blue;
    width: 200px;
    height: 200px;
    z-index: 2;
    opacity: .5;
    }
<div class="main">
  <div class="img"></div>
 </div>

Upvotes: 1

Shmili Breuer
Shmili Breuer

Reputation: 4147

You can use a :before pseudo element.

<div className="container">
    ....content
</div> 

.container {
    position: relative;
    background-color: #0075FF;
}

.container:before {
    content:"";
    display:block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.25);
}

Upvotes: 0

jubalm
jubalm

Reputation: 817

You can do a pure CSS approach, although it sort of overlays a pseudo-element on top of the main element.

*Try hovering over the example.

.colored {
  background: #0075FF;
  width: 100px;
  height: 100px;
  position: relative;
}
.colored:hover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.25);
}
<div class="colored"></div>

Upvotes: 1

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4479

You can use a this trick with linear gradients:

background: linear-gradient(#f005, #f005), linear-gradient(#0f05, #0f05);

In this way you are using two gradients with alpha. The trick is that the colours of gradients starts and ends with the same value.

Upvotes: 1

Related Questions