如何在视差滚动图像上放置文本

我试图在网站上的图像上显示标题。这里有一个小提琴：如何在视差滚动图像上放置文本

我试图通过创建ID头，如标题来解决这个问题：

<h2 id="header">Text</h2>

和风格这是绝对带有的z-index以确保它显示在顶等：

#header{ 
    position: absolute; 
    z-index: 1000; 
    top: 200px; 
    left: 200px; 
}

我假定这将导致定位在遍布元件的顶部的标题，位于从文档的边缘。但是，我没有得到理想的结果。我会如何去做这件事？另外，我昨天晚上看到，使用浮点数通常比定位更好。不知道这是否适用于这种情况，或者它是否属实。如果有人可以称重，我将不胜感激。

来源

2017-04-05 natem1270

您必须调整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{ 
 
\t height: 600px; 
 
\t 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>

来源

2017-04-05 16:12:06

你.paralax类还需要添加位置属性作为relate或absolute。您还可以设置z-index: 0

啊，而且z-index: 1是足够多的头:)

来源

2017-04-05 16:18:46 Ula

您需要更改position: absolute到position: fixed。绝对定位将使元素相对于其父容器。固定位置相对于文档主体。相对定位（position: relative）将其相对于它自然落在DOM流中的位置。

Fiddle here

来源

2017-04-05 16:27:02 sn3ll

另一种解决方案是简单地把你的h1成paralax格...

.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{ 
 
\t height: 600px; 
 
\t 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>

来源

2017-04-05 16:37:10

如何在视差滚动图像上放置文本

回答

相关问题