使用Bulma CSS阻止图像和文本

Question

我尝试使用布尔玛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

使用布尔玛时，请查看.hero元素：https://bulma.io/documentation/layout/hero/。这可能是您要寻找的。如Viira所述，您可以将图片添加到背景中（使用background-image）。

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

Answer 2

这是我给相同情况下的人的最终HTML和CSS。这可能并不完美，但这是一个好的开始...

<div class="hero block_article" style="background-image: url('/static/img/{{ article.image }}');">
    <span>{{ article.name }}</span>
</div>

.block_article {
    width: 500px;
    height: 250px;
    background-size: cover;
    line-height: 230px;
    text-align: center;
    border-radius: 10px;
}

.block_article span {
    color: white;
    text-shadow: 2px 2px black;
    font-size: 1.3em;
}

结果：