悬停时背景颜色的不透明度

Question

在我的代码中，字体颜色会干扰悬停时的背景颜色。如果您将鼠标悬停在图像上并查看“网络研讨会存档”行，您会看到字体颜色部分为白色。如何解决此问题并确保字体为白色？

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.img-list li {
  display: inline-block;
  height: 450px;
  margin: 0;
  position: relative;
  width: 450px;
}
span.text-content {
  background: #1a212b;
  color: white;
  cursor: pointer;
  display: table;
  height: 450px;
  left: 0;
  position: absolute;
  top: 0;
  width: 450px;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  box-sizing: border-box;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
ul.img-list li:hover span.text-content {
  opacity: 0.9;
}
/* Events page */

/*Event link button*/

.btn {
  background-color: transparent;
  border-radius: 42px;
  border: 2px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  font-family: Montserrat;
  line-height: 28px;
  font-size: 20px;
  padding: 5px 15px 5px 15px;
}
.btn:hover {
  background-color: #ffffff;
  color: #484848 !important;
}
.btn:active {
  position: relative;
  top: 1px;
}
.btn:link {
  color: #ffffff;
  text-decoration: none;
}
.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

<ul class="img-list">
  <li>
    <img style="width: 450px; height: 450px;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /><span class="text-content"><span><h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5><hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 28px; border: 3px solid white;" href="http://www.google.com/" target="_blank">READ MORE</a></span></span>
  </li>
</ul>

Answer 1

在您的代码中，您将不透明度设置为悬停在 0.9 上。这意味着整个元素（包括其子元素）将是半透明的。不过，您似乎只想要一个半透明的背景。为此，您需要为背景颜色添加 Alpha 通道，例如通过使用 rgba 值，这不会影响其他元素。

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.img-list li {
  display: inline-block;
  height: 450px;
  margin: 0;
  position: relative;
  width: 450px;
}
span.text-content {
  background: rgba(26, 33, 43, 0.9);
  color: white;
  cursor: pointer;
  display: table;
  height: 450px;
  left: 0;
  position: absolute;
  top: 0;
  width: 450px;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  box-sizing: border-box;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
ul.img-list li:hover span.text-content {
  opacity: 1;
}
/* Events page */

/*Event link button*/

.btn {
  background-color: transparent;
  border-radius: 42px;
  border: 2px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  font-family: Montserrat;
  line-height: 28px;
  font-size: 20px;
  padding: 5px 15px 5px 15px;
}
.btn:hover {
  background-color: #ffffff;
  color: #484848 !important;
}
.btn:active {
  position: relative;
  top: 1px;
}
.btn:link {
  color: #ffffff;
  text-decoration: none;
}
.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

<ul class="img-list">
  <li>
    <img style="width: 450px; height: 450px;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg">
    <span class="text-content">
      <span>
        <h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5>
        <hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;">
        Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.<br>
        <a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 28px; border: 3px solid white;" href="http://www.google.com/" target="_blank">READ MORE</a>
      </span>
    </span>
  </li>
</ul>