<figure>
<img src="http://lorempixel.com/x/x" alt="figure">
<figcaption>Nam elementum non massa at mattis.</figcaption>
</figure>
我正在创建一个 CSS 文件,并希望将具有 100% 宽度和半透明背景颜色的Figcaption 放置在图像顶部,但我希望FigCaption 框的底部和图像的底部始终是无论使用什么图像都相同。
在FigCaption元素上使用绝对定位。不要忘记在图形元素上也设置“position:relative”。这是一个例子: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;
}
也可以使用Flexbox方法。
figure {
display: flex;
flex-direction: column;
margin: 0;
position: relative;
}
img {
max-width: 100%;
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
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*/
}
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Apple_cake_with_vanilla_ice_cream_2.jpg/800px-Apple_cake_with_vanilla_ice_cream_2.jpg" alt="wikimedia-commons_apple-cake"> <br>
<figcaption>
Apple cake with vanilla ice cream
</figcaption>
</figure>
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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=180&w=540&q=30">
<figcaption>
<b>Ottawa road in the evening.</b>
Photo by Marc-Olivier Jodoin on Unsplash
</figcaption>
</figure>
brightness()
组合可增加文字亮度。