使用Bulma CSS进行图像和文本块

Question

我试着用Bulma CSS使这个块图像带有文本。我尝试了很多东西（相对，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提到的，您可以将您的图像添加到背景中（使用background-image）。

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