Question

我想在背景图像前面显示文字。但它总是隐藏我的文字。代码是：

HTML：

<div class="header"> 
<div class="container"> 
  <div class="container-bg">
  </div>
  <div class="container-content">
    <h1>Test Test Test Test Test Test</h1> 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
  </div>
</div>
</div>

CSS：

h1 {
  font-size: 46px;
  color: #ccc
}
p {
  font-size: 28px;
  color: #ccc
}
.header {
  position: relative;
  padding: 30px 0;
}
.container-bg {
    position: absolute;
    top: 0;
    bottom: -60px;
    right: 0;
    left: 0;
  background-image: 
    linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),
    url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700);
    background-size: cover;
}
.container-content {
  text-align: center;
}

的jsfiddle： https://jsfiddle.net/g700q3qc/3/

请帮助：）

Answer 1

在此处添加position:relative -

.container-content {
  text-align: center;
  position: relative;
}

＆＃13;

h1 {
  font-size: 46px;
  color: #ccc
}
p {
  font-size: 28px;
  color: #ccc
}
.header {
  position: relative;
  padding: 30px 0;
}
.container-bg {
position: absolute;
top: 0;
bottom: -60px;
right: 0;
left: 0;
  background-image: 
linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),
url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700);
background-size: cover;
}
.container-content {
  text-align: center;
  position: relative;
}

＆＃13;

<div class="header"> 
<div class="container"> 
  <div class="container-bg">
  </div>
  <div class="container-content">
<h1>Test Test Test Test Test Test</h1> 
<p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
  </div>
</div>
</div>

＆＃13;

Answer 2

你走了!!

h1 {
  font-size: 46px;
  color: #ccc
}
p {
  font-size: 28px;
  color: #ccc
}
.header {
  position: relative;
  padding: 30px 0;
}
.container-bg {
	position: absolute;
	top: 0;
	bottom: -60px;
	right: 0;
	left: 0;
  background-image: 
    linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),
    url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700);
    background-size: cover;
}
.container-content {
  text-align: center;
  position: relative;
}

<div class="header"> 
<div class="container"> 
  <div class="container-bg">
  </div>
  <div class="container-content">
    <h1>Test Test Test Test Test Test</h1> 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
  </div>
</div>
</div>

文本隐藏在背景图像后面

2 个答案: