固定位置抛出背景图像

Question

我需要在背景图片上显示一些文字。环顾四周似乎是这样做的方式：

<div align="center" style="">
    <h1>About Us</h1>       
    some text and more for the sub headline
    <br/><br/>

    <img src="aboutbg.jpg" style="width:500px; position:fixed; z-index:-1;" />

    <div style="width:500px;  position: relative; z-index:1;" >
        About Us
    </div>
</div>

但是position:fixed的{​​{1}}似乎已经出现了问题，并且它没有正确居中。最终结果是：

我错过了什么？

Answer 1

它遵循您对祖先元素的text-align语句。您需要将其left位置设置为0，并且可能还需要top。

将背景设为实际背景可能会更好。

.content {
  text-align: center;
  background-image: url(http://lorempixel.com/1200/800/nature);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  min-height: 400px;
  color: yellow;
}

<div class="content">
  <h1>About Us</h1> some text and more for the sub headline
  <br/>
  <br/>
  <div style="width:500px;  position: relative; z-index:1;">About Us</div>
</div>

Answer 2

这是内联样式。

    <div style="background:url('aboutbg.jpg') no-repeat;width:500px;text-align:center;">
        <h1>About Us</h1>       
        <p>some text and more for the sub headline</p>
        <br/>
        <br/>

        <ul style="list-style:none;">
            <li style="border-right:1px solid #000;display:inline;margin-right:7px;padding-right:7px;"><a href="#">About Us</a></li>
            <li style="border-right:1px solid #000;display:inline;margin-right:7px;padding-right:7px;"><a href="#">Terms</a></li>
            <li style="display:inline;"><a href="#">Contact</a></li>
        </ul>
    </div>