好的，所以我创建了一个使用视差滚动的图像。
代码为：
<head><style>
/*Parallax*/
.hpimg1 {
/* Set a specific height */
height: 540px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-left: 0px;
}
.hpimg1
{ /* The image used */
background-image: url("bg.jpg");
}
.welcome
{
height: 200px;
background-color: #fff;
word-wrap: normal;
word-break: keep-all;
font-family: 'Montserrat';
font-weight: 700;
font-size: 31px;
line-height: 1.125em;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
box-sizing: border-box;
top: 300px;
}
h5
{
color:white;
top: 300px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
padding-bottom: 38px;
-webkit-margin-before:0.67em;
-webkit-margin-after:0.67em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
-webkit-tap-highlight-colour:rgba(0,0,0,0);
-webkit-font-smoothing:antialiased;
-webkit-box-direction:normal;
}
h5:after, h5:before
{
content: '';
width: 50px;
height: 2px;
background: black;
margin: 0 10px;
}</style
</head>
<body>
<div class="hpimg1"><div class="Welcome"><h5>Welcome to RyanTeaches</h5></div></div>
</body问题是，由于某种原因，我的消息"欢迎来到RyanTeaches"卡在导航栏后面的页面顶部。(仅包含视差滚动+消息的相关代码(
我已经尝试了很多东西，top：300;，边距顶部，填充顶部等，试图将这条消息向下移动，但它坚持留在页面顶部，隐藏在导航栏后面。
另外，当我尝试将代码移动到我的.css样式表中时，视差图像隐藏在所有内容后面，并且在屏幕上不可见？
新的编码器 - 任何帮助将不胜感激！
干杯
你可以添加一些弹性框属性来.Welcome：
/*Parallax*/
.hpimg1 {
/* Set a specific height */
height: 540px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-left: 0px;
}
.hpimg1 {
/* The image used */
background-image: url("https://placehold.it/200x200");
}
.welcome {
height: 200px;
background-color: #fff;
word-wrap: normal;
word-break: keep-all;
font-family: 'Montserrat';
font-weight: 700;
font-size: 31px;
line-height: 1.125em;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
box-sizing: border-box;
top: 300px;
}
.Welcome {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
h5 {
color: white;
top: 300px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
padding-bottom: 38px;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-tap-highlight-colour: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
-webkit-box-direction: normal;
}
h5:after,
h5:before {
content: '';
width: 50px;
height: 2px;
background: black;
margin: 0 10px;
}<body>
<div class="hpimg1">
<div class="Welcome">
<h5>Welcome to RyanTeaches</h5>
</div>
</div>
</body>