文字未显示在背景图片上

Question

我正在制作登录页面，这听起来像是一个愚蠢的问题，但是我的<h2>和<form>元素没有显示在页面上的任何地方。 我已经尝试了所有我能想到的，但仍然没有任何尝试。 我很困惑。

我用于全屏背景图像的照片是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> 

的CSS

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

#rotating-img-wrapper img {
  position: fixed;
  width: 250px;
  height: 750px;
}

.rotating-img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

h2 {
  color: #000000;
  position: absolute;
}

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();
});

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

Answer 1

我对您如何处理此布局有一些了解。

我略微简化了HTML（删除了表单并放入了简单的文本行），以便由于固定且绝对定位的元素而将注意力集中在各个堆叠层上。

关键在于，由于#bg元素是固定的，因此它将设置用于定位任何其他定位的子元素的参考点，无论它是固定的还是绝对的。

在原始帖子中，您将偏移量设置为top: -50%和left: -50% ，这将块的原点放置在可见查看区域之外。

结果， h2定位在#bg左上角，因此不可见，并且处于常规内容流中的p文本也将从容器块（ #bg ）的左上角开始。

首先，将偏移量设置为top: 0和left: 0 ，宽度和高度为100％，然后重新考虑如何在图像旋转器和背景图像中调整图像大小。

现在您已经看到了元素的位置，您将能够在布局上取得进步。

 body { margin: 0; /* get rid of 10px border from default browser style sheet */ } #bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } #bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } #rotating-img-wrapper img { position: fixed; width: 250px; height: auto; } .rotating-img { display: block; position: absolute; top: 0; left: 0; } h2 { color: #000000; position: absolute; top: 30%; left: 50%; } 

 <section id="bg"> <img src="http://placehold.it/500x500"> <div class="container"> <div class="row"> <div class="col-lg-12" id="rotating-img-wrapper"> <img class="rotating-img" src="http://placekitten.com/2000/4000"> </div> </div> <div class="text"> <h2>To learn more about our services, drop us a line</h2> <p>Some other words ...</p> </div> </section> 

Answer 2

您可以使用背景图片：url（img / bg.jpg）; 在#bg中，而不是直接添加图像并尝试在其中添加一些内容。

Answer 3

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

z-index:-1000;

z索引控制哪些元素与其他元素重叠。 z索引越高，元素将位于前面。 看看是否可以清除所有内容。 否则，还有另一个问题。 我也很好奇您为什么对所有这些元素都使用绝对定位。

Answer 4

在CSS中尝试以下代码：

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

然后从HTML页面中删除该标记。 我还将着眼于简化您的代码，因为您似乎将大量的div相互包裹在一起。 如果适合您的需求，也许考虑使用一张桌子。