将辅助文本添加到响应式图像

Question

我对编码还很陌生。我会很感激我能得到的任何帮助。

有没有办法在主标题下方的背景图像上方添加辅助文本，这也是响应式的？

我希望能够以不同于 h2 标题的方式设置文本样式。

我尝试了几种不同的方法，但都没有成功。 :-( 新文本只会在移动模式下重叠，而不是堆叠在标题下。

如果有人可以查看此代码以了解我缺少的内容，感谢您的帮助。

.homepagetext:after {
content:"";
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.1) 8%,rgba(50,50,50,0.1) 56%,rgba(161,161,161,0) 66%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00ffffff',GradientType=1 ); /* old IE fallback */
  width: 200%;
  height: 400%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}


body {
  height: 100%;
  width: 100%;
  overflow:hidden;
  background-image: url(https://globalonline.blob.core.windows.net/globalonlinecourses/Bannerz_1205.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: fixed;
  /* https://snap-photos.s3.amazonaws.com/img-thumbs/960w/SRU39R3XRV.jpg */
  background-size: cover; /* version standardisée */
}


h2 {
  font-family: 'karbon';
  font-weight: normal;
  font-size: 40px;
  color: white;
  padding: 25px;
  position: absolute;
  left: 35%;
  top: 15%;
  transform: translate(-50%, -50%);
  border: 0px solid white;
}

<div>
  <h2 class="homepagetext">Introduction to <BR><em>GEORGRAPHIC INFORMATION SYSTEMS</em></h2>
</div>


  
  


  
  
  

Answer 1

我相信有几件事让你偏离了轨道。

绝对位置非常适合将文本放在图像上，但由于您的图像是背景，因此您不需要它来设置样式以使文本出现在背景图像上。

删除：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

.homepagetext:after {
content:"";
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.1) 8%,rgba(50,50,50,0.1) 56%,rgba(161,161,161,0) 66%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00ffffff',GradientType=1 ); /* old IE fallback */
  width: 200%;
  height: 400%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}


body {
  height: 100%;
  width: 100%;
  overflow:hidden;
  background-image: url(https://globalonline.blob.core.windows.net/globalonlinecourses/Bannerz_1205.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: fixed;
  /* https://snap-photos.s3.amazonaws.com/img-thumbs/960w/SRU39R3XRV.jpg */
  background-size: cover; /* version standardisée */
}


h2 {
  font-family: 'karbon';
  font-weight: normal;
  font-size: 40px;
  color: white;
  padding: 25px 25px 0 25px;
  margin:0;
  position: static;
  border: 0px solid white;
}
.new-class{
  color:#bada55;
  padding:0 25px;
  margin:0;
}

<div>
  <h2 class="homepagetext">Introduction to <BR><em>GEORGRAPHIC INFORMATION SYSTEMS</em></h2>
  <p class="new-class">secondary text</p>
</div>