html - 更改背景颜色而不是背景图像的不透明度

Question

我有一个圆形黑色的跨度，它有一个背景图像作为属性。 我希望跨度的不透明度为 0.75，但背景图像的不透明度应为 1。 悬停时背景图像和跨度的不透明度应为 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>

Answer 1

使用rgba而不是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>