Question

我面临一个大问题，我想把图像的标题放在滑块之外。我有主滑块，滑块显示我的项目的图像。我想要的是将每个项目的名称放在滑块下（滑块不在里面），名称应该与图像相对改变。我试图解决它，但它不起作用。这是我的代码脚本：这个html：

<div class="master-slider ms-skin-contrast" id="masterslider" >
        {% for project in projects %}
            <div class="ms-slide">
                <img src="{{asset('uploads/images/')}}{{project.images[0].name}}" data-src="{{asset('uploads/images/')}}{{project.images[0].name}}" alt="{{project.name}}"/>
                <div class="ms-layer ms-caption" id="image-caption">
                     {{project.name}}
                </div>

            </div>
        {% endfor %}
    </div>

这是css

#image-caption{
    position: fixed; /* Stay in place */
    z-index: 9999; /* Stay on top */
    top: 250px;
    right: 800px;
    color: red;
}

Answer 1

确定。现在我知道它是如何工作的。使用完整的CSS会更容易，但是你可以尝试这样的事情来看看会发生什么：

#image-caption {
    position: absolute;
    bottom: -50px;
}

将图像的标题放在滑块之外

1 个答案: