Question

我正在使用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;
}

不幸的是，我仍然是网络世界的新手，如果有人可以指导我完成如何在Galleria幻灯片上应用文本，我将非常感激。

提前致谢。

Answer 1

我不理解 - 您想在其上使用类.textbox的元素吗？您可以在HTML（<div class="textbox">My text here</div>）中创建元素，然后就可以了。我唯一建议的是将CSS属性z-index添加到.textbox类。

Answer 2

只需将文本框放在源代码中的#galleria div之后。

您还需要将z-index:10001添加到文本框中，因为全屏功能会将zIndex 10000应用于容器。您可能还想添加position:absolute而不是relative。

如何在Galleria全屏幻灯片上添加文字？

2 个答案: