Question

为什么字幕转换开始比图像本身低2-3个像素。它应该从图像的底部向上滑动，而不是向下滑动2px

Answer 1

在IE10中，它与Chrome和Firefox相同。

您必须为图像设置高度，然后隐藏它的溢出部分：

figure {
   height:288px; /* as your image`s height is */
   overflow:hidden;
}

Answer 2

要使其正常工作，我必须将img设置为display：block，以便从图像底部向上滑动。

＆＃13;

img {
  display: block;
}
img {
  max-width: 100%;
}
figure {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  max-width: 60%;
  /* must be max-width, not width !!! */
}
figcaption {
  padding: 0 2% 2% 2%;
  width: 96%;
  display: block;
  font-size: 2.5vmin;
  position: absolute;
  background: black;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  opacity: 1;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  z-index: 0;
}
figcaption h1 {
  font-weight: bold;
  font-size: 3vmin;
  color: limegreen;
  margin: 0;
}
figure:hover figcaption {
  opacity: 1;
}
.cap-bot figcaption {
  left: 0;
  bottom: -39%;
}
.cap-bot:hover figcaption {
  bottom: 0;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  Works in IE10+
  <div style="width:300px">
    <h2>
Coworker of the year (Please hover over my face)</h2> 
    <figure class="cap-bot">
      <img src="http://media01.dconstruct.org/2011-0003/img/speakers/kevin-slavin@2x.jpg" alt="Old forest" />
      <figcaption>
        <h1>
Sherwood Forest</h1>
        This is the forest where Robin Hood and all other cock suckers live
      </figcaption>
    </figure>
  </div>

</body>

</html>

＆＃13;

图标题转换从下图开始

2 个答案: