如何只淡化 div，而不淡化文本？

Question

如何只淡化 in/out div，而不淡化 div 中的文本？

<div class="fade">Hover over me.</div>

.fade {
  background-color: antiquewhite;
  width: 300px;
  height: 200px;
  text-align: center;

  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
}

Answer 1

通过淡化 div，您将淡化其中的文本，因为文本是 div 的一部分。如果您只想淡化背景颜色（div 的唯一其他可见部分，而不是文本），您可以使用 alpha 透明度。

.fade {
  background-color: antiquewhite;
  width: 300px;
  height: 200px;
  text-align: center;
  transition: background-color .25s ease-in-out;
}

.fade:hover {
  background-color: rgba(250,235,215,0.5);
}

<div class="fade">Hover over me.</div>

如何只淡化 div，而不淡化文本？

How do I fade only the div, not the text?

html

css

fade