悬停时调整背景大小

【问题标题】：Adjust background size on hover悬停时调整背景大小
【发布时间】：2017-03-29 05:08:21
【问题描述】：

当你将鼠标悬停在图片上时，你会看到它会被我的代码中的半透明背景所取代。

透明背景应该覆盖所有图片，但是它只覆盖了文本所占据的区域。

我如何确保它覆盖整个图片，而不考虑框中的文字？

/*Programs*/

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
}

div.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  display: table;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  overflow-y: auto;
  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;
  overflow-y: auto;
}

div.text-content div {
  display: block;
  text-align: center;
  vertical-align: middle;
}

ul.img-list li:hover div.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: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}

.btn:link {
    color: #ffffff;
    text-decoration: none;
}

.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

.btn:hover {
  background-color: #ffffff;
  color: #1b1c16 !important;
}

.btn:active {
	position: relative;
	top: 1px;
}

/*All events button*/

.evens_btn {
background: ;
}

.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}

.events_btn>i{
color: #ffffff; 
margin-right: 15px; 
font-size: 50px;
}

.events_btn:link>i {
    color: #f9c70f;
}

.events_btn:visited>i {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>i {
 color: #f9c70f;
}

.events_btn:active>i {
  color: #f9c70f;
}

.events_btn:link>span {
    color: #f9c70f;
}

.events_btn:visited>span {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>span {
 color: #f9c70f ;
}

.events_btn:active>span {
  color: #f9c70f;
}
<ul class="img-list">
  <li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />                              
    <div class="text-content">
      <div>
       <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: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a>
      </div>
    </div>
  </li>
</ul>

【问题讨论】：

    标签： html css hover opacity


    【解决方案1】：

    从.text-content 中删除display:table;。还要添加bottom:0;。

    【讨论】：

    • 如果内容需要垂直居中，则添加另一个 div 作为 .text-content 的直接子级，并将 display: table CSS 属性应用于此。
    【解决方案2】：

    移除 display: table;，并使用 CSS Flexbox 的 align-content 属性将内容垂直居中对齐。

    看看下面的sn-p：

    /*Programs*/

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
}

div.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  overflow-y: auto;
  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;
  overflow-y: auto;
}

div.text-content div {
  display: block;
  text-align: center;
  vertical-align: middle;
}

ul.img-list li:hover div.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: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}

.btn:link {
    color: #ffffff;
    text-decoration: none;
}

.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

.btn:hover {
  background-color: #ffffff;
  color: #1b1c16 !important;
}

.btn:active {
	position: relative;
	top: 1px;
}

/*All events button*/

.evens_btn {
background: ;
}

.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}

.events_btn>i{
color: #ffffff; 
margin-right: 15px; 
font-size: 50px;
}

.events_btn:link>i {
    color: #f9c70f;
}

.events_btn:visited>i {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>i {
 color: #f9c70f;
}

.events_btn:active>i {
  color: #f9c70f;
}

.events_btn:link>span {
    color: #f9c70f;
}

.events_btn:visited>span {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>span {
 color: #f9c70f ;
}

.events_btn:active>span {
  color: #f9c70f;
}
    &lt;ul class="img-list"&gt;&lt;li&gt;&lt;img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /&gt;&lt;div class="text-content"&gt;&lt;div&gt;&lt;h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;"&gt;WEBINAR&lt;br/&gt;ARCHIVE&lt;/h5&gt;&lt;hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/&gt;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.&lt;br&gt;&lt;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: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank"&gt;READ MORE&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;

    希望这会有所帮助！

    【讨论】：

    • 是的，它也应该垂直居中。非常感谢您的加倍努力！ :)
    • @Ira 这是我的荣幸！如果这个回答真的对你有帮助，也请采纳。
    【解决方案3】： 

    /*Programs*/

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
}

div.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  overflow-y: auto;
  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;
  overflow-y: auto;
}

div.text-content div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

ul.img-list li:hover div.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: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}

.btn:link {
    color: #ffffff;
    text-decoration: none;
}

.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

.btn:hover {
  background-color: #ffffff;
  color: #1b1c16 !important;
}

.btn:active {
	position: relative;
	top: 1px;
}

/*All events button*/

.evens_btn {
background: ;
}

.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}

.events_btn>i{
color: #ffffff; 
margin-right: 15px; 
font-size: 50px;
}

.events_btn:link>i {
    color: #f9c70f;
}

.events_btn:visited>i {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>i {
 color: #f9c70f;
}

.events_btn:active>i {
  color: #f9c70f;
}

.events_btn:link>span {
    color: #f9c70f;
}

.events_btn:visited>span {
  color: #ffffff;
  text-decoration: none;
}

.events_btn:hover>span {
 color: #f9c70f ;
}

.events_btn:active>span {
  color: #f9c70f;
}
    &lt;ul class="img-list"&gt;&lt;li&gt;&lt;img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /&gt;&lt;div class="text-content"&gt;&lt;div&gt;&lt;h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;"&gt;WEBINAR&lt;br/&gt;ARCHIVE&lt;/h5&gt;&lt;hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/&gt;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.&lt;br&gt;&lt;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: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank"&gt;READ MORE&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;

    【讨论】：

      【解决方案4】：

      只需添加这个 Css：

      .text-content div{
height:1326px;
}

      【讨论】：

        猜你喜欢
        • 2016-10-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-01-14
        • 1970-01-01
        • 2013-06-08
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode