Search code examples
htmlcsstransparencyopacity

How to Apply Transparent Background Color to Division Without Using Opacity Property

As you know CSS Opacity Property is making transparent background color or image. You can see samples below difference between opacity property, background-color:rgba and blend-mode properties.

div {
  display:inline-block;
  width:100px;
  height:100px;
}

#sample1 {
  background-color: rgb(221,51,85);
  opacity:0.4;
}

#sample2 {
  background-color:rgba(221,51,85,0.4);
}

#sample3 {
  background-color:rgb(221,51,85);
}

#sample4 {
  background-image: url(https://static.seattletimes.com/wp-content/uploads/2014/11/MattDay_Web-100x100.jpg);
  background-color: rgba(221,51,85);
  background-blend-mode: multiply;
  color:#fff;
}

div h3 {
  text-align:center;
}
<div id='sample1'>
  <h3>Sample 1</h3>
    <p>I'm NOT Original Color</p>
</div>

<div id='sample2'>
  <h3>Sample 2</h3>
  <p>I'm NOT Original Color</p>
</div>

<div id='sample3'>
  <h3>Sample 3</h3>
  <p>I'm Original Color</p>
</div>

<div id='sample4'>
  <h4>Sample 4</h4>
  <p>I'm Original Color</p>
</div>

In first sample opacity applies all elements in the div. In second sample opacity only applies background color. In third sample, using the original color in background color. In fourth sample, blend-mode applies background-image not background-color

How can I transparent background without using opacity or rgba and also it shouldn't lost the original color.

Sample transparency usage without losing the original color; enter image description here

EDIT

I also add a new sample to the snippet sample 4. It uses blend-mode property, I can apply the image only.

Solution

  • I think what you're looking for is the mix-blend-mode property.

    You can read more about it and its compatibility with different browsers in this page. Here's an example (tested on Chrome):

    div {
  background-color: #d35;
  display: inline-block;
  width: 150px;
  height: 150px;
  position: absolute;
  top: 20px;
  left: 40px;
}

img {
  mix-blend-mode: multiply;
}
    <div></div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThfH4SD1Kod8gzTIO0WtldPqlDacHt2NLm5itWUPf7AHdbo9_2Dg" />