Question

我目前正在编写一个网站，我试图将文字与其他元素一起放在旗帜下，但似乎没有任何东西在下降。

https://gyazo.com/379cfa01780dddc112d06bd53a38e04b https://gyazo.com/c67ba5499d4ce188946094978f346c6a

这是我的代码

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="jquery.min.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel='stylesheet' href='bootstrap.min.css'> 
<style>
#topBanner {
    position: relative;
}

#topBanner  {
    display: block;
    margin-left:auto;
    margin-right:auto;
}

#topBanner:after {
    -moz-box-shadow: inset 0 0 180px #defeec;
    -webkit-box-shadow: inset 0 0 360px #defeec; /* THIS PARAGRAPH CONTROLS SOME FADE ON THE BANNER */
    box-shadow: inset 180px 0 400px #defeec;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* _______________________________________________________________________________________________________ */

#body {
    background: url(stardust.png) repeat 0 0;
    background-position: right;
}

#container-narrow {
    margin-top: 300px;
    background-color: white;
    position: absolute;
    width: 80%;
    height: 2000px;
}

body {
    margin-left: 10%;
    margin-right: 10%;
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#hCharacter {
    margin-top: 50%;
    position: relative;
    font-family: 'ChunkFive';
    font-size: 100px;
    text-align: center; 
    color: red;
    z-index: 999;
}
@font-face {
    font-family: 'ChunkFive';
    src: url('ChunkFive.otf') format: 'opentype';
}  
</style>

</head>
<body id='body'>
    <div id='container-narrow'></div>
    <div id=topBanner>
        <img src="LOGO%20Mockup.jpg" width=1920px height=400px></img>
    </div>   
    <div id=hCharacter>Characters</div>

    <p> Characters</p>
    <script> $.backstretch('/bgImage'); </script>
 </body>
 </html>

Answer 1

试试这个......需要进行微调，但是有效。

SomeBaseClass.ProcessFoo

/ * _______________________________________________________________________________________________________ * /

<!DOCTYPE html>
    <html>
   <head>
    <script type='text/javascript' src="jquery.min.js"></script>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'>   </script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel='stylesheet' href='bootstrap.min.css'> 

 <style>




    #topBanner {
  position: relative;
}

   #topBanner  {
 display: block;
 margin-left:auto;
margin-right:auto;
  }

  #topBanner:after {
-moz-box-shadow: inset 0 0 180px #defeec;
-webkit-box-shadow: inset 0 0 360px #defeec;                 /* THIS       PARAGRAPH CONTROLS SOME FADE ON THE BANNER */
 box-shadow: inset 180px 0 400px #defeec;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

Answer 2

这是问题所在：

#container-narrow {
    margin-top: 300px;
    background-color: white;
    position: absolute;
    width: 80%;
    height: 2000px;
}

您正在设置将文本推出框架的高度。将其设置为auto或将其缩短以进行修复。

https://jsbin.com/wunadu/1/edit

为什么html中的文字没有移动？

2 个答案: