悬停在图片上的叠加层底部有额外的空间

时间：2017-03-23 09:42:42

标签： html css

当我将鼠标悬停在我的图像上时，应该是一个合适的叠加层（rgba），上面有一些文字和一个播放按钮。 - 播放按钮现在是红色方块 图像下方有一些奇怪的空间，我无法摆脱。 据我所知，我没有任何奇怪的利润或任何其他％高于100％ 我已经尝试了很多，但也许最好向社区提问，先谢谢你们。

代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        /*main content*/
        .musiccontainer {
            text-align: center;
        }
        .musicbox{
            margin:5px;
            display: inline-block;
            width:300px;
            transition:0.5s;

        }
        .musicbox a {
            position:absolute;
            width: 100%; 
            height: 100%;
            text-decoration: none;
            background-color:rgba(0,0,0,0.5);
            opacity:0;
            transition:0.5s;
        }
        .musicbox img{
            width:100%;
            height:auto;
        }
        /*hidden content*/
        .btnplay{
            position: absolute;
            background-color:red;
            width:50%;
            height:50%;
            top:25%;
            left:25%;
        }
        .btnpause{
            position: absolute;
            background-color:blue;
            width:50%;
            height:50%;
            top:25%;
            left:25%;
            display:none;
        }
        .desc{
            position:absolute;
            width:100%;
            height:20%;
            top:80%;
            text-align:center;
            color:white;
        }
        .overlay{
            height:100%;
            width:100%;
        }
        /*all hover effects*/
        .musicbox a:hover{
            transition: 0.5s ease-in-out;
            -moz-transition: 0.5s ease-in-out;
            -webkit-transition: 0.5s ease-in-out;
            opacity: 1;
        }
        .musicbox:hover{
            transition: 0.5s;
            transform: scale(1.1);
            z-index: 100;
            -webkit-box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
        }
    </style>
</head>
<body>
    <div class="musiccontainer">
        <div class="musicbox" align="center">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
    </div>
</body>
</html>

3 个答案:

答案 0 :(得分：2)

使用vertical-align属性删除多余空格.. 

/*main content*/

.musiccontainer {
  text-align: center;
}

.musicbox {
  margin: 5px;
  display: inline-block;
  width: 300px;
  transition: 0.5s;
}

.musicbox a {
  position: absolute;
  width: 100%;
  height: 100%;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: 0.5s;
}

.musicbox img {
  width: 100%;
  height: auto;
  vertical-align: middle; 
}


/*hidden content*/

.btnplay {
  position: absolute;
  background-color: red;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
}

.btnpause {
  position: absolute;
  background-color: blue;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  display: none;
}

.desc {
  position: absolute;
  width: 100%;
  height: 20%;
  top: 80%;
  text-align: center;
  color: white;
}

.overlay {
  height: 100%;
  width: 100%;
}


/*all hover effects*/

.musicbox a:hover {
  transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  opacity: 1;
}

.musicbox:hover {
  transition: 0.5s;
  transform: scale(1.1);
  z-index: 100;
  -webkit-box-shadow: 0px 10px 32px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 10px 32px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 10px 32px 0px rgba(0, 0, 0, 0.75);
}
<div class="musiccontainer">
  <div class="musicbox" align="center">
    <a>
      <div class="overlay">
        <div class="btnplay"></div>
        <div class="btnpause"></div>
        <div class="desc">Something</div>
      </div>
    </a>
    <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
  </div>
  <div class="musicbox">
    <a>
      <div class="overlay">
        <div class="btnplay"></div>
        <div class="btnpause"></div>
        <div class="desc">Something</div>
      </div>
    </a>
    <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
  </div>
  <div class="musicbox">
    <a>
      <div class="overlay">
        <div class="btnplay"></div>
        <div class="btnpause"></div>
        <div class="desc">Something</div>
      </div>
    </a>
    <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
  </div>
  <div class="musicbox">
    <a>
      <div class="overlay">
        <div class="btnplay"></div>
        <div class="btnpause"></div>
        <div class="desc">Something</div>
      </div>
    </a>
    <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
  </div>
  <div class="musicbox">
    <a>
      <div class="overlay">
        <div class="btnplay"></div>
        <div class="btnpause"></div>
        <div class="desc">Something</div>
      </div>
    </a>
    <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
  </div>
  <div class="musicbox">
    <a>
      <div class="overlay">
        <div class="btnplay"></div>
        <div class="btnpause"></div>
        <div class="desc">Something</div>
      </div>
    </a>
    <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
  </div>
  <div class="musicbox">
    <a>
      <div class="overlay">
        <div class="btnplay"></div>
        <div class="btnpause"></div>
        <div class="desc">Something</div>
      </div>
    </a>
    <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
  </div>
  <div class="musicbox">
    <a>
      <div class="overlay">
        <div class="btnplay"></div>
        <div class="btnpause"></div>
        <div class="desc">Something</div>
      </div>
    </a>
    <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
  </div>
</div>

答案 1 :(得分：0)

默认img代码会从底部占用一些额外的空间，要删除此内容，只需将display: block添加到img代码

.musicbox img {
  width: 100%;
  height: auto;
  display: block;
}

答案 2 :(得分：0)

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <style>
        /*main content*/
        .musiccontainer {
            text-align: center;
        }
        .musicbox{
            margin:5px;
            display: inline-block;
            width:300px;
			position: relative;
            transition:0.5s;
			line-height: 0;

        }
        .musicbox a {
            position:absolute;
            width: 100%; 
            height: 100%;
            text-decoration: none;
            background-color:rgba(0,0,0,0.5);
            opacity:0;
            transition:0.5s;
        }
        .musicbox img{
            width:100%;
            height:auto;
        }
        /*hidden content*/
        .btnplay{
            position: absolute;
            background-color:red;
            width:50%;
            height:50%;
            top:25%;
            left:25%;
        }
        .btnpause{
            position: absolute;
            background-color:blue;
            width:50%;
            height:50%;
            top:25%;
            left:25%;
            display:none;
        }
        .desc{
            position:absolute;
            width:100%;
            height:20%;
            top:80%;
            text-align:center;
            color:white;
        }
        .overlay{
            height:100%;
            width:100%;
        }
        /*all hover effects*/
        .musicbox a:hover{
            transition: 0.5s ease-in-out;
            -moz-transition: 0.5s ease-in-out;
            -webkit-transition: 0.5s ease-in-out;
            opacity: 1;
        }
        .musicbox:hover{
            transition: 0.5s;
            transform: scale(1.1);
            z-index: 100;
            -webkit-box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.75);
        }
    </style>
</head>
<body>
    <div class="musiccontainer">
        <div class="musicbox" align="center">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
        <div class="musicbox">
            <a>
                <div class="overlay">
                    <div class="btnplay"></div>
                    <div class="btnpause"></div>
                    <div class="desc">Something</div>
                </div>
            </a>
            <img class="cover" src="https://www.w3schools.com/css/img_fjords.jpg" width="300" height="300">
        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;  只删除行高div，默认情况下添加试一试

相关问题
最新问题