https://jsfiddle.net/o3942ppa/1/
我尝试通过创建带有标头的标题来解决问题,例如：
<h2 ID="header">Text</h2>
并使用z-index完全设置样式以确保它在顶部显示如下：
#header{ position: absolute; z-index: 1000; top: 200px; left: 200px;} 我假设这将导致将标题定位在从文档边缘定位的所有元素的顶部.但是,我没有得到理想的结果.我该怎么做呢？另外,我昨晚读到使用浮子比定位更好.不确定这是否适用于这种情况,或者它是否属实.如果有人可以权衡,我将不胜感激.
解决方法 您必须调整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 ></div><div ><h1>Restauraunt heading</h1></div></body>总结
以上是内存溢出为你收集整理的html – 如何在视差滚动图像上放置文本全部内容，希望文章能够帮你解决html – 如何在视差滚动图像上放置文本所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）