-3

the image is square, but it has a circle in the middle, the rest of the square is transparent. I'm using 

opacity: 0.86

but what I would like is to set a color in front of the image. something like that

color: rgba (247, 172, 8, 0.86);

I want the image to be that color and with that opacity on the front. like adding a "layer with color"

enter image description here

Ivan Paredes
  • 465
  • 2
  • 5
  • 20
  • I'm not totally clear on your desired effect. Please show what you've coded and what specifically goes wrong as compared with what you want. It may help to [create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – showdev Feb 08 '18 at 18:50
  • I want that when selecting the image (which is a white circle) it turns orange basically – Ivan Paredes Feb 08 '18 at 18:51
  • You might have some success with [`max-box-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image), like [this](https://stackoverflow.com/questions/29280817/is-there-any-way-to-colorize-a-white-png-image-with-css-only), but browser support is currently pretty limited. If the circle is just plain white, I might suggest a pure CSS circle instead of a PNG. – showdev Feb 08 '18 at 19:15
  • You need to elaborate more on your problem and on the expected result – Gerardo BLANCO Feb 08 '18 at 20:26
  • yes without images is impossible – Ivan Paredes Feb 08 '18 at 20:40

1 Answers1

0

This will help your needs.

Hope it works

.circle {
  width: 150px;
  height: 150px;
  background: rgba(247, 172, 8, 0.86);
  border-radius: 50%;
  z-index: 3;
  position: absolute;
  top: 0;
}

.image {
  position: absolute;
  top: 0;
}
<div>
  <img class="image" src="http://via.placeholder.com/150x150">
  <div class="circle"></div>
</div>
Gerardo BLANCO
  • 5,590
  • 1
  • 16
  • 35