Css 将文本置于响应图像上

我有个问题，我不知道如何解决。 我想创建3个imagesarrows，我以前画过，在每一个里面放上文本，所有这些都应该是有响应的。。。 这是我的密码：

HTML:

CSS:

.箭头{ 宽度：1000px； 保证金：0自动； .箭头1{ 背景：urlfeatures/arrow-blue.png顶部中间无重复； 最小高度：250px； } .箭头2{ 背景：url/features/arrow-orange.png顶部中间无重复； 最小高度：250px； } .箭头3{ 背景：url/features/arrow-red.png顶部中间无重复； 最小高度：250px； } p{ 填充：0 300px 0 120px； } } 现在箭头根本没有响应，它们充当背景 我想做叠加，但我想把文字，而不是颜色

p.S引导程序2

---

谢谢

对于我两三个月前刚刚建立的一个站点，我要解决的任务几乎完全相同。我实际上是把文字放在圆圈里，不是箭头，但原理是一样的。如果我给你看它的CSS，你可以调整它为你的箭头

基本上，我使用绝对定位将项目放置在彼此上方。当然，文本有一个z索引来覆盖它，还有一个透明的背景。然后，为了使它具有响应性，并保持无论用户运行的文本大小如何，媒体查询都有以em为单位的断点，而不是以px为单位的断点。该网站是，它的两个圆圈包含的标志和下面的标志口号

最棘手的一点是准确定位，这样无论屏幕的宽度如何，这两个东西都可以流畅地相互重叠；你必须通过反复试验才能得到正确的位置。以下是HTML：

<div id='usrSiteNameDiv'></div>
<p id='gpSiteName'><a href='http://www.enigmaticweb.com'>The Enigmatic Web</a></p>
<div id='usrSiteSloganDiv'></div>
<p id='gpSiteSlogan'>Occasional web&nbsp;development blog articles.....</p>

它的响应部分没什么可做的，除了手机，我将徽标移到了左侧边缘，标语从圆圈中取出，只是在徽标下显示成一行：

@media all and (max-width: 27em) 
{
    #usrSiteNameDiv,
      #gpHeader  #gpSiteName {
        left        : 0;
  }
  #usrSiteSloganDiv {
        display     : none;
  }
  #gpHeader  #gpSiteSlogan {
        bottom      : 0;
        left        : 0;
        width       : 90%;
  }

但是，由于我们处理的是文本，因此使用em单位作为断点可以确保无论用户在浏览器中使用的文本大小，它都能正常工作

---

我想这就是一切。我希望这将为您的设计提供足够的信息。

您的文本只需具有更高的z索引即可。如果您不熟悉z-index，则需要使用“相对定位”（positioning relative），这样z-index才能正常工作。看看引导旋转木马是如何使用标题的。考虑到你的标记，我不明白为什么这个问题会被标记为twitter引导…嗨，伙计，非常有用的答案！谢谢！

@media all and (max-width: 27em) 
{
    #usrSiteNameDiv,
      #gpHeader  #gpSiteName {
        left        : 0;
  }
  #usrSiteSloganDiv {
        display     : none;
  }
  #gpHeader  #gpSiteSlogan {
        bottom      : 0;
        left        : 0;
        width       : 90%;
  }