Question

我实际上是在学习布尔玛，并试图克服布尔玛旋转木马的问题：

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

我尝试了很多事情，例如将图像作为旋转木马项目的背景，但是图像不适合旋转木马的整个高度，等等...

这是我的实际代码：

<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>

如何在布尔玛转盘上显示标题？

1 个答案: