图像的叠加字幕

Question

我有一个形象的说明了问题。我有这样的HTML结构：

<div class="scrollable-content" data-mcs-theme="dark-thick" style="padding: 0px; overflow-x: auto;"> 
    <ul style="list-style: none; white-space:nowrap; padding: 0px;"> 
     @foreach($projects as $project) 
      <li style="display: inline; margin: 0px;"> 
       <a href="{!! url($locale.'/projects/project/'.$project->id) !!}"> 
        <img class="project-cover-image" src="/images/{!! $project->cover_image_name !!}" height="250px" width="auto"> 
       </a> 
      </li> 
     @endforeach 
    </ul> 
</div> 

它使用水平滚动条创建一个漂亮的画廊。但是我需要为图片添加描述，这些图片将放置在图片底部，覆盖整个宽度，并且它们在某种程度上应该是透明的。

问题是，无论我做什么，我得到的描述需要100％width的页面，或者它有width里面的文字。

我已经试过用div,span，position absolute/relative的不同组合，所有的东西和我都无法使它工作。

它应该是这个样子：

我怎么能这样做？

Answer 1

使用position:relative/absolute

body { 
 
    margin: 0 
 
} 
 
.scrollable-content { 
 
    padding: 0; 
 
    overflow-x: auto 
 
} 
 
ul { 
 
    list-style: none; 
 
    white-space: nowrap; 
 
    padding: 0; 
 
    margin:0 
 
} 
 
li { 
 
    position: relative; 
 
    display:inline-block 
 
} 
 
span { 
 
    background: rgba(0, 0, 0, .5); 
 
    display: inline-block; 
 
    height: 50px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100% 
 
} 
 
img { 
 
    display: block 
 
} 
 
a { 
 
    color: #fff 
 
}

<div class="scrollable-content" data-mcs-theme="dark-thick"> 
 
    <ul> 
 
    <li> 
 
     <a href=""> 
 
     <img class="project-cover-image" src="//lorempixel.com/250/250"> 
 
     <span>description</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href=""> 
 
     <img class="project-cover-image" src="//lorempixel.com/500/250"> 
 
     <span>description</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href=""> 
 
     <img class="project-cover-image" src="//lorempixel.com/400/250"> 
 
     <span>description</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

你有两个选择（至极产生相同的结果）：

- 用图片作为背景一个DIV，以及字幕在这个div里面;

#image { 
 
    width:550px; 
 
    height:150px; 
 
    position:relative; 
 
    background: url('http://i.imgur.com/HNj6tRD.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size:100% 100%; 
 
} 
 

 
.coverdown { 
 
    color: white; 
 
    width: 100%; 
 
    height: 30%; 
 
    position:absolute; 
 
    bottom:0%; 
 
    background: rgba(0,0,0,0.5); 
 
    text-align: center; 
 
}

<div id="image"> 
 
<div class="coverdown">Subtitle here with a description.</div> 
 
</div>

- 图像和position:relative容器内部与position:absolute的字幕;

#container { 
 
    width:550px; 
 
    height:150px; 
 
    position:relative; 
 
} 
 

 
img { 
 
    width:550px; 
 
    height:150px; 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
} 
 

 
.subtitle { 
 
    color: white; 
 
    width: 100%; 
 
    height: 30%; 
 
    position:absolute; 
 
    bottom:0%; 
 
    background: rgba(0,0,0,0.5); 
 
    text-align: center; 
 
}

<div id="container"> 
 
<img src="http://i.imgur.com/HNj6tRD.jpg" alt=img> 
 
<div class="subtitle">Subtitle here with a description.</div> 
 
</div>

Answer 3

基本上，你需要相对/绝对为@ dippas的答案。

按照我的建议，使用inline-block，所以它通过内容获得大小，并且将允许您轻松地将position描述。

以下示例使用figure和figcaption。

figure可以是包裹在一个<a>链接显示inline-block和figure作为block然后，以避免下方的间隙。

figure { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 0; 
 
} 
 
img { 
 
    display: block; 
 
    max-height:80vh;height:250px/*snippet demo purpose */ 
 
} 
 
figcaption { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    /* makeup*/ 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    
 
    
 
} 
 
/* demo purpose */ 
 

 
div { 
 
    white-space: nowrap; 
 
    overflow:auto; 
 
} 
 
figure { 
 
    white-space: normal; 
 
    text-align: center; 
 
}

<div> 
 
    <figure> 
 
    <img src="http://www.hyperkreeytiv.com/wp-content/uploads/2014/08/IMG_4973.jpg" alt="wolves" /> 
 
    <figcaption> 
 
     <p>these are wolves</p> 
 
    </figcaption> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://4.bp.blogspot.com/-oSEWgZNEopE/TtL8kfGuBzI/AAAAAAAAB6U/b8VSzZaoK3g/s400/action_wolf_1111_photo1.jpg" alt="wolves" /> 
 
    <figcaption> 
 
     <p>these are wolves</p> 
 
    </figcaption> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://1.bp.blogspot.com/-GfOyrk3kZ0w/TewM0BMvbNI/AAAAAAAABM0/KPm3li5Xwko/s1600/alpha+male+Wallpaper__yvt2.jpg" alt="wolves" /> 
 
    <figcaption> 
 
     <p>these are wolves</p> 
 
    </figcaption> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://www.ooyuz.com/images/2015/10/13/1447449028465.jpg" alt="wolves" /> 
 
    <figcaption> 
 
     <p>these are wolves</p> 
 
    </figcaption> 
 
    </figure> 
 
</div>