如何在 Galleria 全屏幻灯片上添加文本？
我正在使用 Galleria 全屏幻灯片 http://galleria.aino.se/themes/fullscreen/ 我正在尝试在几张幻灯片的中间添加文本和超文本。
这是我的 html 代码：
<head>
<meta charset="utf-8">
<title> welcome to my website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="galleria/galleria-1.2.2.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="galleria">
<a href="images/logo.jpg"><img title="Project Abstract" alt="brief dics about project abstract" src="images/logo.thumb.jpg"></a>
<a href="images/image1.jpg"><img title="slide 1" alt="brief disc about slide 1" src="images/image1.thumb.jpg"></a>
<a href="images/image2.jpg"><img title="slide 2" alt="brief disc about slide 2" src="images/image2.thumb.jpg"></a>
<a href="images/image3.jpg"><img title="slide 3" alt="brief disc about slide 3" src="images/image3.thumb.jpg"></a>
<a href="images/image4.jpg"><img title="slide 4" alt="brief disc about slide 4" src="images/image4.thumb.jpg"></a>
</div>
<script>
Galleria.loadTheme('galleria/themes/fullscreen/galleria.fullscreen.min.js');
$('#galleria').galleria({
transition: 'fade',
show: 19
});
</script>
</body>
我想要下面这个风格化的 div 标签来覆盖幻灯片：
.textbox {
position: relative;
height: 600px;
width: 900px;
top: 180px;
margin-left:auto;
margin-right:auto;
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.7;
text-align: justify;
}
不幸的是，我对网络世界还是个新手，如果有人能引导我完成如何在幻灯片顶部应用文本的步骤，我将非常感激。画廊幻灯片。
提前致谢。
I'm using Galleria fullscreen slide show http://galleria.aino.se/themes/fullscreen/ and I'm trying to add text and hypertext in the middle of couple of slides.
This is my html code:
<head>
<meta charset="utf-8">
<title> welcome to my website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="galleria/galleria-1.2.2.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="galleria">
<a href="images/logo.jpg"><img title="Project Abstract" alt="brief dics about project abstract" src="images/logo.thumb.jpg"></a>
<a href="images/image1.jpg"><img title="slide 1" alt="brief disc about slide 1" src="images/image1.thumb.jpg"></a>
<a href="images/image2.jpg"><img title="slide 2" alt="brief disc about slide 2" src="images/image2.thumb.jpg"></a>
<a href="images/image3.jpg"><img title="slide 3" alt="brief disc about slide 3" src="images/image3.thumb.jpg"></a>
<a href="images/image4.jpg"><img title="slide 4" alt="brief disc about slide 4" src="images/image4.thumb.jpg"></a>
</div>
<script>
Galleria.loadTheme('galleria/themes/fullscreen/galleria.fullscreen.min.js');
$('#galleria').galleria({
transition: 'fade',
show: 19
});
</script>
</body>
I want this stylized div tag below to overlay the slides:
.textbox {
position: relative;
height: 600px;
width: 900px;
top: 180px;
margin-left:auto;
margin-right:auto;
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.7;
text-align: justify;
}
Unfortunately, I'm still new to the web world and would really appreciate if someone can walk me through the steps to how to apply text on top of the galleria slides.
Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不明白 - 您想使用带有
.textbox类的元素吗？您只需在 HTML 中创建该元素即可 ()，然后就可以开始了。我唯一建议的是将 CSS 属性z-index添加到该.textbox类中。I'm not understanding - you want to use an element with the class
.textboxon it? You can just create the element in your HTML (<div class="textbox">My text here</div>) and you are good to go. Only thing I would recommend is adding the CSS propertyz-indexto that.textboxclass.只需将文本框放在源代码中#galleria div 后面即可。
您还需要将
z-index:10001添加到文本框，因为全屏函数将 10000 的 zIndex 应用于容器。您可能还想添加position:absolute而不是relative。Just put the textbox after the #galleria div in the source code.
You’ll need to add
z-index:10001to the textbox as well, since the fullscreen function applies a zIndex of 10000 to the container. You might also want to addposition:absoluteinstead ofrelative.