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%);

＆＃13;
＆＃13;
.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; }
＆＃13;
<div> <h2 class="homepagetext">Introduction to <BR><em>GEORGRAPHIC INFORMATION SYSTEMS</em></h2> <p class="new-class">secondary text</p> </div>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案: