twitter-bootstrap 如何在视差滚动图像上放置文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43236327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Place Text Over a Parallax Scrolling Image
提问by natem1270
I'm trying to display a heading over the image on my website. Here's a fiddle:
我正在尝试在我的网站上的图像上显示标题。这是一个小提琴：
https://jsfiddle.net/o3942ppa/1/
https://jsfiddle.net/o3942ppa/1/
I tried to fix the problem by creating a heading with id header such as:
我试图通过创建一个带有 id 标题的标题来解决这个问题，例如：
<h2 id="header">Text</h2>
and style it absolutely with a z-index to ensure it displays on top like:
并使用 z-index 对其进行绝对样式设置，以确保它显示在顶部，例如：
#header{
position: absolute;
z-index: 1000;
top: 200px;
left: 200px;
}
I was assuming that this would result in positioning the title on top of all over elements, positioned from the edge of the document. However, I didn't get the desired result. How would I go about doing this? Also, I read last night that it's generally better to using floats than positioning. Not sure if that applies in this case, or if it's true at all. I would appreciate if someone could weigh in.
我假设这会导致将标题定位在所有元素的顶部，从文档的边缘定位。但是，我没有得到想要的结果。我该怎么做呢？另外，我昨晚读到使用浮动通常比定位更好。不确定这是否适用于这种情况，或者是否完全正确。如果有人可以权衡一下，我将不胜感激。
回答by Mike Diglio
You have to adjust the structure of your HTML content so you #headeris before your .parallax. Using your desired style:
您必须调整 HTML 内容的结构，以便#header在.parallax. 使用您想要的样式：
.parallax{
background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
#header{
position: absolute;
z-index: 1000;
top: 200px;
left: 200px;
}
.text-box{
height: 600px;
padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
.navbar {
margin-bottom: 0 !important;
}<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<h1 id="header">Text</h1>
<div class="parallax"></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>
</div>
</body>回答by Dejo Dekic
Another solution is to simply put your h1into a paralax div...
另一种解决方案是简单地将您的h1放入视差 div 中...
.parallax{
background-image: url("https://images.pexels.com/photos/349608/pexels-photo-349608.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
position:relative;
}
.text-box{
height: 600px;
padding: 50px;
}
@media only screen and (max-device-width: 1024px) {
.parallax {
background-attachment: scroll;
}
}
#header{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.navbar {
margin-bottom: 0 !important;
}<title>Bootstrap Default Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="parallax"><h1 id="header">Text</h1></div>
<div class="col-lg-12 text-box text-center">
<h1>Restauraunt Heading</h1>
</div>
</body>回答by Ula
Your .paralaxclass also needs to have added position attribute as relativeor absolute. You can also set z-index: 0
您的.paralax班级还需要将位置属性添加为relativeor absolute。你也可以设置z-index: 0
Ah, and z-index: 1is enough for header :)
啊，z-index: 1对于标题就足够了:)
回答by sn3ll
You need to change position: absoluteto position: fixed. Absolute positioning will place the element relative to its parent container. Fixed positioning positions it relative to the document body. Relative positioning (position: relative) positions it relative to where it would naturally fall in the flow of the DOM.
您需要更改position: absolute为position: fixed. 绝对定位将相对于其父容器放置元素。固定定位将其相对于文档正文定位。相对定位 ( position: relative) 将其相对于它在 DOM 流中自然落入的位置进行定位。
