Javascript 文本未显示在背景图像上

我正在创建一个登录页，这听起来可能是一个愚蠢的问题，但是我的

和

元素没有显示在我的页面上的任何地方。我已经尝试了我能想到的一切，但仍然一无所获。我很困惑

我在全屏背景图像中使用的照片是photoshop中的一张，中间有一个灰色的正方形（看起来就像有些人用z-index做的那样）。在背景中，它是自行车标志的js作为一种复古设计

我不确定我是否做错了什么，或者我的css、html、js中是否有什么东西使得文本/表单没有显示出来

index.html

 <section id="bg">
        <img src="img/bg.jpg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" id="rotating-img-wrapper">
                    <img class="rotating-img" src="img/corona.png">
                    <img class="rotating-img" src="img/mc.png">
                    <img class="rotating-img" src="img/mtv.png">
                    <img class="rotating-img" src="img/op.png">
                    <img class="rotating-img" src="img/supercell.png">
                </div>
            </div> 
            <div class="text">
              <h2>To learn more about our services, drop us a line</h2>
               <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Email Address</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
              </div>       
            </div>            
    </section> 

javascript

$(window).load(function() { 
    var InfiniteRotator =
    {
        init: function()
        {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 1000;

            //interval between items (in milliseconds)
            var itemInterval = 5000;

            //cross-fades time (in milliseconds)
            var fadeTime = 2500;

            //number of items
            var numberOfItems = $('.rotating-img').length;

            //current item
            var currentItem = 0;

            //show first item
            $('.rotating-img').eq(currentItem).fadeIn(initialFadeIn);

            //loop through the items
            var infiniteLoop = setInterval(function(){
                $('.rotating-img').eq(currentItem).fadeOut(fadeTime);

                if(currentItem == numberOfItems -1){
                    currentItem = 0;
                }else{
                    currentItem++;
                }
                $('.rotating-img').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);
        }
    };
    InfiniteRotator.init();
});

---

如果有人能在我的代码中看到我看不到的错误，我很想知道。谢谢你的帮助

在图像CSS中，在CSS中执行以下操作：

z-index:-1000;

---

z索引控制哪些元素与其他元素重叠。z索引越高，元素前面的元素就越多。看看这能不能澄清什么。否则，还有另一个问题。我也很好奇为什么你要在所有这些元素上使用绝对定位。

你可以使用背景图片：url（img/bg.jpg）；在#bg中，不要直接添加图像，而是尝试在其上添加内容。

在CSS中，尝试以下代码：

#bg {
    background-image:url('img/bg.jpg');
}

---

然后从HTML页面中删除标记。我还想看看如何简化您的代码，因为您似乎有大量的div都封装在彼此之间。也许考虑使用一张表格，如果它适合你的需要。

< P>我有一些了解你如何接近这个布局。

我稍微简化了您的HTML（删除了表单并放入了一行简单的文本），因此 由于固定的和绝对的 定位元素

关键在于，由于

#bg

元素是固定的，因此它为 定位任何其他定位的子元素，无论是固定的还是绝对的

在原始帖子中，您将偏移量设置为

top:-50%

和

left:-50%

，这是 将块的原点放置在可见查看区域之外

因此，

h2

位于

#bg

的左上角，因此不可见， 而

p

文本也将从左上角开始，这是常规内容流 容器块的（

#bg

）

首先，将偏移设置为

top:0

和

left:0

，宽度和高度为100%， 然后重新思考如何在图像旋转器和背景中调整图像大小 形象

现在您看到了元素所在的位置，您将能够取得进展 与您的布局

正文{
边距：0；/*从默认浏览器样式表中删除10px边框*/
}
#背景{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
#bg-img{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
最小宽度：50%；
最小高度：50%；
}
#旋转式img包装器{
位置：固定；
宽度：250px；
高度：自动；
}
.旋转img{
显示：块；
位置：绝对位置；
排名：0；
左：0；
}
氢{
颜色：#000000；
位置：绝对位置；
最高：30%；
左：50%；
}

要了解更多有关我们服务的信息，请给我们留言
其他一些词

谢谢您的回答。我在

div class='text'

中尝试了你的建议，但没有成功。它们是

位置：绝对（用于图像），因此它与之前的代码类似。或者至少我是这样理解的
位置：绝对
如上所述，我也想到了，在CSS中这样做：所有内容都在#bg部分，由于-50%的位置，它远离页面。@colonelsanders我不得不将其设置为-50%，因为我在图像周围有一个小的白色边框。@colonelsanders指出了代码的关键问题，这是我在下面发布的解决方案中发现的。白色小边框可能是由于默认的浏览器样式表造成的。感谢您抽出时间给我一些建议，告诉我如何更好地处理这个特定问题。我感谢我朋友的帮助。
#bg {
    background-image:url('img/bg.jpg');
}