css - 使用 Bulma CSS 使用图像和文本 block

Question

我尝试使用 Bulma CSS 制作这个带有文本的 block 图像。我已经尝试了很多东西(相对、z-index 等)，但我没有成功地为桌面或移动设备制作出很棒的东西。每次，文本都会溢出或超出框。我无法设置标题字符限制，所以如果可能的话，我也尝试在第二行进行分词。

这是我正在寻找的示例:

这是我的 HTML:

<div class="block_article" data-overlay>
   <img src="/static/img/{{ article.image }}" alt="" />
   <a href="/a/{{ article.slug }}.html"><span>{{ article.name }}</span></a>
</div>

还有我当前的 CSS(不工作):

.block_article {
    position: relative;
    width: 500px;
    height: 250px;
}

.block_article span {
    position: absolute; 
    top: 50px;
    left: 5%; 
    width: 100%;
    color: white;
    text-shadow: 2px 2px black;
    font-size: 1.3em;
}

结果:

是否有针对此类事情的一些提示，或针对此的 Bulma 扩展？

感谢您的帮助!

Answer 1

使用 Bulma 时，请查看 .hero 元素:https://bulma.io/documentation/layout/hero/ .这可能就是您要找的。正如 Viira 提到的，您可以将图像添加到背景中(使用背景图像)。

此外，学习如何使事物居中 (https://www.w3.org/Style/Examples/007/center.en.html) 可能对您有用。