Question

我是html和css的新手，对不起，如果这是＆＃34;重复＆＃34;我无法找到适合我的答案，但也许我有一个单独的问题。我在这里设置了这个CSS代码的背景：

.background {
position: fixed;
top: -50%;
left:-50%;  
width: 200%; 
height: 200%;
}
.background img { 
position: absolute;
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto; 
min-width: 50%;
min-height: 50%;
}

并在HTML中使用它：

<div class="background"><img src="lol_background.png" alt="League Champion Background" /></div>

现在，我试图将标题置于此背景之上，但出于某种原因我无法弄明白，标题的CSS就在这里：

#headtxt {
position: absolute;
text-align: center;
margin: auto;
z-index: 100;
color: pink; 
}

我在HTML中称之为：

<h1 id="headtxt">Before and After: League AP Item Changes</h1>

所以，这是我尝试的内容：当我删除position: absolute时，文字落后于背景。而且显然现在，让text-align: center;似乎什么都不做。所以我不确定发生了什么，但我认为这是一个蹩脚的新秀错误。

Answer 1

自动确定position属性设置为absolute的元素的宽度。要使文字居中，您必须将#headtext的宽度设置为100%。

.background {
  position: fixed;
  top: -50%;
  left:-50%;  
  width: 200%; 
  height: 200%;
}
.background img { 
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
#headtxt {
  position: absolute;
  text-align: center;
  margin: auto;
  z-index: 100;
  color: pink; 
  width: 100%;
}

<div class="background">
  <img src="http://lorempixel.com/640/480/nature" />
</div>

<h1 id="headtxt">Before and After: League AP Item Changes</h1>

Answer 2

您可以将带有html标签的背景用作您的应用背景。您不需要其他div来放置背景。请尝试以下代码。

http://codepen.io/ogzhncrt/pen/ZGZxXK

之前和之后：联盟AP项目变更

<style>
html { 
  background: url(http://i.imgur.com/JcWrY8U.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#headtxt {
  width:100%;
  text-align:center;
}
</style>

将文本中心对齐背景

2 个答案: