懸停時背景顏色的不透明度

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>