带覆盖字幕的图像

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

＆＃13;

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

1 - 以图片为背景的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>

2 - position:absolute容器内的position:relative图片和副标题;

#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>的{​​{1}}链接和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;
}