Question

我需要文字＆＃34; Relax.Revive.Renew ...＆＃34;在标题下方的背景图像之上。目前它停留在图像的底部。我可以把它放在标题标签内，但标题是粘性的，我需要它与背景滚动。

这是我的HTML：

<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
  <title>New Breath Massage</title>
  <!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file  -->
  <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />

</head>
<body>

  <div class="container"> 

    <div class="header"> <!-- contains the constant stuff at the top of the page -->

      <header>
        <div class="logo">
          <img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
        </div>              
        <nav>
          <ul class="horizNav">
            <li><a href="#offerings">Offerings</a>  |  </li>
            <li><a href="#testimonials">Testimonials</a>  |  </li>
            <li><a href="#arcticles">Articles</a>  |  </li>
            <li><a href="#contact">Contact</a></li>

            <div class="socialIcons">
              <a href="www.facebook.com" target="_blank"><img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon"></a>
              <a href="https://plus.google.com/" target="_blank"><img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon"></a>
              <a href="https://twitter.com/" target="_blank"><img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon"></a>
            </div>
          </ul>
        </nav>          
      </div>
    </header>
    <img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />

    <section><!-- landing page (matthew) -->
      <div class="tagline">
        Relax.Revive.Renew...                       
      </div>  
    </section>

这是css：

        header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 24px;
  line-height: 108px;
  height: 108px;
  background: #fff;
  color: #ccc;
  font-family: 'Helvetica', sans-serif;
  opacity: 0.8;
  border-style: solid;
  border: orange;
}

/*code for full bleed bg image from paulmason.name*/

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  /*min-width: 1024px;*/
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}


#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/

h1 {
  font-weight: lighter;
  font-size: 100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
  display: inline;
  font-family: "Helvetica", sans-serif;
  font-size: 1.1em;
}

nav {
  font-family: "Helvetica", sans-serif;

}

a:link {
  text-decoration: none;
  color: #999;
}

a:hover {
  text-decoration: none;
  color: #ff9966;
}

a:visited {
  text-decoration: none;
  color: #ff9966;
}

.logo {
  float: left;
  /*padding: 10px*/;
}

.socialIcons {
  float: right;
  margin: 10px;
}

.tagline{
  opacity: 1;
  height: 150px;
  font-family: 'Pinyon Script', serif;
  text-align: left;
  font-size: 120px;
  line-height: 100px;
  color: #999;

  /*float: left;*/
  /*border-bottom: 500px;*/
  margin: 0px 25% 0px 20px;
  /*padding: 0px 0px 40px;*/
  display: inline-block;
}

抱歉，它不允许我发布图片。谢谢！

Answer 1

您没有将图片用作背景图片，而是使用内嵌图片：

<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />

我将它交换到你的部分的背景（命名为类背景）并做了一点造型：http://codepen.io/anon/pen/gbXrYv

Answer 2

尝试使用z-index CSS属性。这基本上设置了元素所在页面上的图层。设置完成后，您可以执行以下两项操作之一：

position: absolute 
top: -(x)px

...或

margin-top: -(x)px;

我希望这会有所帮助：）

无法让文本浮动在背景图像上

2 个答案: