Перемещение строки таблицы с непрозрачностью rgba

Question

При наведении курсора на строку таблицы вместо цвета наведения, являющегося более темной версией цвета строки, он постоянно становится серым.

Пример кода

Чего мне не хватает?

tr:hover {
  background: rgba(0, 0, 0, 0.1);
}

.red {
  background: red;
}

.gray {
  background: gray;
}

<table>
    <tbody>
      <tr>
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="gray">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="red">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
    </tbody>
  </table>

Answer 1

Вы перекрываете фон другим при наведении курсора. Вместо этого вам нужно добавить еще один слой поверх исходного фона.

пример, где вы добавляете фоновое изображение поверх цвета фона, где фоновое изображение также является цветом:

tr:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1));
}

.red {
  background-color: red;
}

.gray {
  background-color: gray;
}

<table>
    <tbody>
      <tr>
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="gray">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="red">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
    </tbody>
  </table>

Answer 2

Вы также можете использовать встроенную тень для затемнения цвета фона или изображения.

tr:hover {
  box-shadow:inset 0 0 0 100px rgba(0, 0, 0, 0.1);
}

.red {
  background: red;
}

.gray {
  background: gray;
}

<table>
    <tbody>
      <tr>
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="gray">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="red">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
    </tbody>
  </table>

Можно использовать любой цвет, даже их сочетание: https://codepen.io/gc-nomade/pen/wouBe (демонстрация с несколькими цветами rgba ())