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

Question

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

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 channel ，例如通过使用 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>