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

Question

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

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>