如何在 Bulma 轮播上显示标题？

Question

我实际上正在学习 Bulma 并试图克服这个 Bulma-carousel 问题：

轮播效果很好，但我想在每张显示的图片上添加一个标题。

我尝试了很多方法，例如将图像作为 carousel-item 的背景，但图像不适合轮播的整个高度等等...

这是我的实际代码：

<section class="hero is-large has-carousel">
    <div class="hero-head"></div>
    <div class="hero-body">
        <div class="hero-carousel" data-autoplay="true" data-navigation-keys="false" data-autoplay-speed="5000" data-effect="fade" data-duration="1000">
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background" src="{{ 'assets/images/slider_1.jpg'|theme }}">
                <h2 class="title">C'est beau le Mourillon!</h2>
            </div>
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background"src="{{ 'assets/images/slider_2.jpg'|theme }}">
                <h2 class="title">Oh le téléphérique :o</h2>
            </div>
            <div class="carousel-item has-text-centered has-background">
                <img class="is-background"src="{{ 'assets/images/slider_3.jpg'|theme }}">
                <h2 class="title">Devinez qui je suis?</h2>
            </div>
        </div>
    </div>
    <div class="hero-foot"></div>
</section>

问题是标题显示在图片之后，所以它超出了section元素而没有显示！

我无法使它在图像内部居中！

Answer 1

我终于找到了解决方案（3 小时后）in the git plugin issues:

<div class="carousel-item has-background"> // has-background
    <img class="is-background" src="images/slider_1.jpg"> // is-background
    <div class="hero-body has-text-centered is-overlay"> //hero-body is-overlay
        <h2 class="title">C'est beau le mourillon!</h2>
        <h3 class="subtile">Surtout le 15 août...</h3>
    </div>
</div>

如何在 Bulma 轮播上显示标题？

How to display a title on Bulma carousel?

css

carousel

bulma