Question

当我尝试将文字放在多个图像上时，它只出现在第一个图像上，所以它只是几圈。我不知道为什么要这样做。我是使用HTML / CSS的初学者。演示可在https://jsfiddle.net/mt4wc8xL/获得。只有＆＃34;文字二＆＃34;出现而不是＆＃34; Text One＆＃34;

HTML：

    <div class="container">
        <div class="thumbnail">
            <div class="movie">
                <a href="http://google.ca">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYxGcPfqYK-tTFRFqZFMJ761adVBqV0_3N-cVltJcod_PfkTql" alt="dark knight"/>
                    <span class="text">The Dark Knight</span>
                </a>
            </div>
            <div class="movie">
                <a href="http://google.ca">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYxGcPfqYK-tTFRFqZFMJ761adVBqV0_3N-cVltJcod_PfkTql" alt="shutter island"/>
                    <span class="text">The Dark Knight</span>
                </a>
            </div>
        </div>
    </div>

CSS：

  .container {
    background: white;
    position: absolute;
    height: 19em;
    width: 45em;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}

img {
  max-width: 100%;
}

.spacing{
  position: absolute;
  top: 1em;
  left: 1em;
  width: 225px;
  height: 220px;
}

.movie{
  width: 100%;
  height: 100%;
  display: inline-block;
}

.text{
  position: absolute;
  bottom: -3em;
  left: 0;
  display: inline-block;
  padding: 15px 5px 5px;
  width: 170px;
  color: white;
  font-size: 15px;
  text-shadow: rgba(0,0,0,0.5) 1px 1px 0;
  font-family: sans-serif;

  background-color: black;
  background-position: left-bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Answer 1

position: absolute修复了具有position: relative

的最近祖先

.movie{
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative; /* add this */
}

https://jsfiddle.net/mt4wc8xL/3/

在多个图像上显示HTML / CSS

1 个答案: