Question

我正在制作目标网页，这可能听起来像是一个愚蠢的问题，但我的<h2>和<form>元素并未出现在我的网页上的任何位置。我已经尝试了所有我能想到的东西，但仍然没有。我感到很困惑。

我用于全屏幕背景图片的照片是中心的一个灰色方块的照片之一（看起来像是某些人用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％，然后重新思考如何在图像旋转器和背景中调整图像的大小图像。

既然您已经看到了元素的位置，那么您将能够取得进步与你的布局。

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以使用background-image：url（img / bg.jpg）;在#bg中，而不是直接添加图像并尝试在其上添加内容。

Answer 3

在你的图片CSS中，在CSS中执行此操作：

z-index:-1000;

z-index控制哪些元素与其他元素重叠。 z指数越高，元素前面就越多。看看是否清除了任何东西。否则，还有另一个问题。我也很好奇你为什么要对所有这些元素使用绝对定位。

Answer 4

在CSS中尝试以下代码：

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

然后从HTML页面中删除标记。我还会看一下简化你的代码，因为你似乎有很多div都在彼此之间。如果符合您的需要，也许可以考虑使用表格。

文本没有出现在背景图像上

4 个答案: