Question

<figure>
     <img src="http://lorempixel.com/x/x" alt="figure">
     <figcaption>Nam elementum non massa at mattis.</figcaption>
</figure>

我正在创建一个CSS文件，并希望在图像顶部放置100％宽度和半透明背景色的figcaption，但我想要figcaption框的底部和图像的底部无论使用什么图像，总是一样的。

Answer 1

在figcaption元素上使用绝对定位。不要忘记设置＆＃34; position：relative＆＃34;在图元素上也是如此。这是一个例子：http://jsfiddle.net/armordecai/xL1bk6k7/

figure {
     position: relative;
}
figure img {
    display: block;
}
figcaption {
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 2

也可以使用Flexbox方法。

def change(amount):
    li = []
    
    while amount%5 != 0:
        if amount == 0:
            break
        li.append(7)
        amount -= 7
    
    while amount != 0:
        li.append(5)
        amount -= 5
        
    return li

figure {
  display: flex;
  flex-direction: column;
  margin: 0;
}

img {
  max-width: 100%;
}

figcaption {
  align-self: flex-end;
  text-align: right;
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: #777;
  padding-right: 35px;
  /*adjust this to control how far it should be from egde*/
}

Answer 3

如果您希望使用更细微的字幕，请尝试使用mix-blend-mode CSS属性：

figure {
  position: relative;
}
figure figcaption {
  color: white;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: right;
  padding: 15px;
  font-style: oblique;
  font-size: smaller;
  mix-blend-mode: soft-light;
}

<figure>
  <img alt="figure" src="https://images.unsplash.com/photo-1498084393753-b411b2d26b34?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;h=180&w=540&amp;q=30">
  <figcaption>
    <b>Ottawa road in the evening.</b>
    Photo by Marc-Olivier Jodoin on Unsplash
  </figcaption>
</figure>

与brightness()组合以增加文本的亮度。

将figcaption与图中的图像底部对齐

3 个答案: