Change opacity of background color not background image

Question

I have a span which is circular black in color,and it has a background image as a property. I want the span to have an opacity of 0.75 but the background image should have opacity 1. On hover the opacity of background image and span should be 1.

.left-arrow-black-bar {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  text-align: center;
  opacity: 0.75;
  background-image: url('https://image.ibb.co/bJD73R/arrow_left.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 18px;
}

.left-arrow-black-bar:hover {
  opacity: 1;
}

<span class="left-arrow-black-bar"></span>

This is trivial to Google by entering this exact question title as a search. Please always search first. — Pekka, Nov 28 '17 at 13:51

score 2 · Answer 1 · answered Nov 28 '17 at 07:38

2

Use rgba instead of hex:

.left-arrow-black-bar{
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
  background-image: url('https://image.ibb.co/bJD73R/arrow_left.png');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 10px 18px;
}
.left-arrow-black-bar:hover{
  background-color: rgba(0, 0, 0, 1);
}

<span class="left-arrow-black-bar"></span>

answered Nov 28 '17 at 07:38

Huelfe

1,776
16
25

This is because the arrow is white. I don't think that whiter than white is possible. :) – Huelfe Nov 28 '17 at 07:50
2

This solution works fine with rgba. The rgba opacity doesn't change the image opacity. If you are using a color image you can see it. @Huelfe - That's right. white can't be whiter :D – Sebastian Brosch Nov 28 '17 at 07:51
That's true, didn't think of that. – Carl Binalla Nov 28 '17 at 07:52
This is a pretty neat solution,works for me,Thanks! Yes,this is visible for a colored image. Check out this codepen https://codepen.io/hchawla13/pen/YEORyy – Harpreet Chawla Nov 28 '17 at 11:18

Change opacity of background color not background image

1 Answers1