个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
概述:我使用 Bootstrap 3 作为我的 CSS 框架，因此内容是使用其容器/网格系统组织的。背景动画由基本上相互锯齿形的蓝/绿对 Angular 线条组成。动画背景序列使用两个垂直重复的图像。目前，动画背景图像位于它们自己的容器/div 中。本质上，我正在尝试使背景容器上方的内容适合多个容器。
我的目标是让动画背景响应设备大小，但也能够将内容锚定到页面背景/动画的特定位置。最后我想根据鼠标的 y 轴位置触发其他事件。
最初我认为我可以将背景放在自己的容器中，然后将包含内容的容器/div 设置为更高的 z-index，这样它就会位于背景动画之上。从查看 jsfiddle 可以看出，我无法将内容容器定位在背景动画上方。它被推到页面底部。
我想知道是否需要在其自己的非 Bootstrap div 中制作背景，而只有内容使用 Bootstrap ？我可以使用 width: 100% 和 height: 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>
最佳答案
我能够通过一些代码更改来解决问题。从来没有想过是否有可能将两个具有不同 z-index 的容器相互堆叠。
<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 框架。
关于javascript - 使用位于动画背景上方的 Bootstrap 3 获取网页内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25274640/
25
4
0
我正在使用 javascript 并有以下类: const Product = require('../models').Product class ProductService { cons
我正在开发一个简单的应用程序，宠物用户可以在其中创建关于他们宠物的板并在板上显示图片。 我正在尝试创建一个功能，用户可以点击他们的图板，将他们重定向到他们的图板，该图板将显示他们所有的宠物图片。 当我
我有这样的事情:循环遍历 ids，并对每个 ids 向服务器(同一域)发出 ajax 请求 (async:true) 并将接收到的数据附加到 DOM 元素。这不是一项艰巨的任务，它确实有效。示例代码:
我正在尝试使用 Pillow 在我的网络应用程序中添加用户可上传的图像。我创建了一个 Django Upload 模型并将其注册到 Admin 中。当我使用管理控制台添加照片后，我收到以下错误。最初该
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
说到 UINavigationBar 时我有点困惑。我以编程方式设置它，它的作用是将我的 viewController 向下推(因此在启动应用程序后看不到 Storyboard中看到的 View 底部
我有以下查询，它可以满足我的要求，并显示从出生日期转换而来的人们的年龄。但我现在想通过说大于或小于这些年龄来缩小结果范围，但我不知道该怎么做。 SELECT u.`id` as `user_id`
我有一个 ListView (不是 recyclerView)，其中每一行都有一个按钮、几个 TextView 和一个 EditText。单击特定按钮(“editTremp”)后，我希望 EditTe
我的 cellAtIndexPath 中有一个查询。正如常见的那样，此查询从单元格行索引处的数组中获取对象。我想知道每次加载 tableView 时是否只有一个查询，还是将其算作每个 indexPat
我目前正在探索 http://www.ecovivo.be/rubriek/food 上使用的模板中的错误. 问题:访问该链接时，您会注意到右侧有一个带有内容的大型 float 图像。现在一切正常。但
我在 ViewController 之间通过引用传递特定模型的数组。 如果我更改数组中特定元素的任何值，它会在所有 ViewController 中很好地反射(reflect)，但是当我从该数组中删除
svg 包含更多元素，其中之一是下拉选择器。我遇到的问题是选择器只能在其顶部边缘被点击，而不能在选择器的其他任何地方被点击。 选择器称为 yp-date-range-selector。在下一张图片中，
我的元素使用 20 行 20 列的 css 网格布局(每个单元格占屏幕的 5%)。其中一个页面有一个按钮。最初该页面包含在网格第 5-8 列和网格第 6-9 行中，按钮本身没有问题，但我需要将其居中放
我想使用 CSS Trick 使图像居中.但是如果图像大小是随机的(不固定的)怎么办。令人惊讶的是，我不想保持图像响应，我想在不改变其宽度或高度(实际像素)的情况下将图像置于中心。 下面是我的代码:
我正在尝试在网址之间进行路由。产品是一个类: from django.db import models from django.urls import reverse # Create your mo
我正在通过查看 Django 教程来制作网站。我收到一个错误: NoReverseMatch at /polls/ Reverse for 'index' with no arguments not
我一直在试用 Django 教程 Django Tutorial Page 3并遇到了这个错误 "TemplateDoesNotExist at /polls/ " . 我假设问题出在我的代码指向模板
我有一个应用程序，其中大部分图像资源都存储在单独的资源包中(这样做是有正当理由的)。这个资源包与主应用程序包一起添加到项目中，当我在 Interface Builder 中设计我的 NIB 时，所有这
我使用 Xcode 6.3.2 开发了一个 iPad 应用程序。我将我的应用程序提交到 App Store 进行审核，但由于崩溃而被拒绝。以下是来自 iTunes 的崩溃报告。 Incident Id
我正在使用以下内容来显示水平滚动条: CSS: div { width: 300px; overflow-x: scroll; } div::-webkit-scrollbar {
我是一名优秀的程序员,十分优秀！