Question

我正在尝试为我的网页设置全屏背景，但当我这样做时，h1文字会消失。

HTML：

<div class="background"></div>
<div class="text">
<h1>Welcome</h1>

h1的CSS：

.text h1 {
    margin:auto;
    text-align:center;
    font-size:15vw;
    color:white;
    text-transform:uppercase;
    font-family:BebasNeue Regular;
    letter-spacing:2vw;
}

CSS for background：

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

.background {
background-image: url("../images/background.png");
height:100%; 
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

如何将h1文字放在背景之上？

Answer 1

使用z-index CSS属性。

z-index CSS属性指定定位元素及其后代的z顺序。当元素重叠时，z顺序决定哪一个覆盖另一个。具有较大z-index的元素通常覆盖具有较低z元素的元素。

这是一个link来理解它。

Answer 2

你可以这样做：

html, body {margin: 0; height: 100%}

.background {
  height: 100%;
  background-image: url('http://via.placeholder.com/1600x900');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.background > h1 {
  margin: auto;
  text-align: center;
  font-size: 15vw;
  color: white;
  text-transform: uppercase;
  font-family: BebasNeue Regular;
  letter-spacing: 2vw;
}

<div class="background">
  <h1>Welcome</h1>
</div>

Answer 3

改为

HTML

<body>
    <h1>Welcome</h1>
</body>

CSS

h1 {
    margin:auto;
    text-align:center;
    font-size:15vw;
    color:white;
    text-transform:uppercase;
    font-family:BebasNeue Regular;
    letter-spacing:2vw;
}
body {

     background-image: url("../images/background.png");
}

或者你可以制作

z-index

的h1

z-index: 1;

和图像的z-index

z-index: 0;

Answer 4

将h1放入.background div

<style>
	.text h1 {
		margin:auto;
		text-align:center;
		font-size:15vw;
		color:white;
		text-transform:uppercase;
		font-family:BebasNeue Regular;
		letter-spacing:2vw;
	}
	.background {
		background-image: url("http://via.placeholder.com/300.png/09f/fff");
		height:100vh;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>
<div class="background">
	<div class="text">
		<h1>Welcome</h1>
	</div>
</div>

背景让我的H1文字消失了

4 个答案: