使用Bootstrap 3正确定位在动画背景之上获取网页内容

Getting webpage content using Bootstrap 3 positioned above animated background correctly

本文关键字：背景 获取 网页内容 动画 Bootstrap 定位 使用      更新时间：2023-09-26

概述:我使用Bootstrap 3作为我的CSS框架，因此内容是使用其容器/网格系统组织的。背景动画由蓝色/绿色对角线条组成，基本上是彼此之字形。动画背景序列使用两个垂直重复的图像。目前，动画背景图像在它们自己的容器/div中。从本质上讲，我试图适合一些容器与背景容器上方的内容。

我的目标是有动画背景响应设备的大小，但也能够有内容锚定在页面背景/动画的特定位置。最后，我希望根据鼠标的y轴位置触发其他事件。

最初我认为我可以有背景在自己的容器，然后有容器/div的内容设置为更高的z-index，所以它将定位在背景动画之上。从jsfiddle中可以看出，我无法将内容容器放置在背景动画上方。它被推到页面底部

我想知道我是否需要使背景在自己的非引导div，而只有内容使用引导?我可以使用宽度:100%和高度:100%，但我不确定我是否能够锚定/固定某些内容到页面中的特定点。

我愿意接受任何建议。简单地说，我希望在动画背景上正确地显示内容位置，同时还允许页面对设备大小做出响应。
<body>        
    <div class="container">
        <div class="bluestrip">
            <img src="http://i59.tinypic.com/rt0txj.jpg" />
        </div>
        <div class="greenstrip">
            <img src="http://i57.tinypic.com/auv6fb.jpg" />
        </div>
        <div class="bluestrip extra">
            <img src="http://i59.tinypic.com/rt0txj.jpg" />
        </div>
        <div class="greenstrip">
            <img src="http://i57.tinypic.com/auv6fb.jpg" />
        </div>
        <div class="bluestrip extra">
            <img src="http://i59.tinypic.com/rt0txj.jpg" />
        </div>
        <div class="greenstrip">
            <img src="http://i57.tinypic.com/auv6fb.jpg" />
        </div>
    </div>
    <div class='container zindex'>
        <div class="row">
            <div class='col-md-2'>
                <img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
            </div>
            <div class='col-md-2'>
                <img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
            </div>
            <div class='col-md-2'>
                <img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
            </div>
        </div>
    </div>
</body>
http://jsfiddle.net/bismarck611/jt2k4o6z/

我能够通过一些代码更改来解决这个问题。从来没有想过是否有可能有两个容器堆叠在一起，不同的z指数。

<body>        
    <div class="background-content">
        <div class="bluestrip">
            <img src="http://i59.tinypic.com/rt0txj.jpg" />
        </div>
        <div class="greenstrip">
            <img src="http://i57.tinypic.com/auv6fb.jpg" />
        </div>
        <div class="bluestrip extra">
            <img src="http://i59.tinypic.com/rt0txj.jpg" />
        </div>
        <div class="greenstrip">
            <img src="http://i57.tinypic.com/auv6fb.jpg" />
        </div>
        <div class="bluestrip extra">
            <img src="http://i59.tinypic.com/rt0txj.jpg" />
        </div>
        <div class="greenstrip">
            <img src="http://i57.tinypic.com/auv6fb.jpg" />
        </div>
    </div>
    <div class='container zindex'>
        <div class="row">
            <div class='col-md-2'>
                <img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
            </div>
            <div class='col-md-2'>
                <img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
            </div>
            <div class='col-md-2'>
                <img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
            </div>
        </div>
    </div>
</body>

保存img的div我将css类更改为:

.background-content {
    position: absolute;
    z-index: -1;
    min-width: 100%;
    min-height: 100%;
}

这允许图像根据屏幕大小自行调整大小，并适合页面内容下方。现在我仍然可以在我的css动画背景上使用bootstrap框架。

相关文章：