css - 将文本放在响应图像上

Question

我有问题，我不知道如何解决。 我想创建 3 个图像(箭头，我之前画过)并在每个图像中放入文本，所有这些都应该是响应式的...... 这是我的代码:

HTML:

<div class="arrows">
    <div class="arrow1">    
        <h2></h2>
        <p></p>
        </div>
    <div class="arrow2"> 
        <h2></h2>
        <p></p>  
    </div>

            <div class="arrow3">
                <h2></h2>
                <p></p>
            </div> 

CSS:

        .arrows {
            width: 1000px;
            margin: 0 auto;

            .arrow1 {
                background: url("features/arrow-blue.png") top center no-repeat;
                min-height: 250px;
            }

            .arrow2 {
                background: url("/features/arrow-orange.png") top center no-repeat;
                min-height: 250px;
            }

            .arrow3 {
                background: url("/features/arrow-red.png") top center no-repeat;
                min-height: 250px;
            }

            p {
                padding: 0 300px 0 120px;
            }
        }

现在箭头根本没有响应，它们充当封面(背景) 我想做叠加，但我想放置文本而不是颜色。

P.S Bootstrap 2

谢谢!

Answer 1

我在 2 或 3 个月前刚刚建立的网站上遇到了几乎完全相同的任务。 (实际上我是把文字放在圆圈里，而不是箭头，但原理是一样的)。如果我向您展示它的 CSS，您可以根据您的箭头调整它。

基本上我使用绝对定位将元素放在彼此之上。当然，文本有一个 z-index 来覆盖它，还有一个透明的背景。然后为了让事情响应，并保持用户可能运行的任何文本大小，媒体查询有 em 单位的断点，而不是 px 单位。网址是http://www.enigmaticweb.com ，它是包含 Logo 和 Logo 下方标语的两个圆圈。

棘手的一点是让位置完全正确，这样无论屏幕宽度如何，两个东西都可以流畅地叠放在一起；您将不得不反复试验才能获得正确的确切位置。这是 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>

圆圈不是图像(它们实际上是由圆 Angular 和零宽度/高度的 div 制作的)但这不应该影响你，我可以很容易地在文本下面使用图像。您可能遇到的一个问题是文本的良好布局；在此文本中的某个时刻，浏览器以一种使其在圆圈内看起来不平衡的方式换行文本，这就是为什么您会看到那里的硬空间以强制它以不同的方式换行。

CSS(桌面屏幕宽度)是:

#usrSiteNameDiv {
        position   : absolute;
        border     : 4px solid blue;
        border-radius: 6.2em;
        box-shadow : 5px 0 15px;
        height     : 12em;
        width      : 12em;
        background : #99ffff; 
        top        : 0;
        left       : 3em; 
        z-index    : 2;
  }
  #gpHeader  #gpSiteName {
        position   : absolute;
        background : transparent;
        font-size  : 200%;
        width      : 5em;
        top        : 1.2em;
        left       : 1.5em;   /* half the div width cos font in this div is twice the size */
        text-align : center;
        padding-left: 0.6em;
        z-index    : 2;
  }
      #usrSiteSloganDiv {
        position   : absolute;
        bottom     : 0;
        left       : 13.5em; 
        border     : 4px solid #0033cc;
        border-radius: 5.17em;
        box-shadow : -5px -2px 2px 0px darkblue;
        height     : 10em;
        width      : 10em;
        background : #99ffff; 
      }
  #gpHeader  #gpSiteSlogan {
        position   : absolute;
        bottom     : 1.7em;
        left       : 13.5em; 
        width      : 9em;
        background : transparent;
        text-align : center;
        padding-left: 1em;
        font-size  : 100%;
  }

它的响应部分没什么可做的，除了手机我把标志移到左边缘，标语从圆圈中取出并显示在标志下方的一行中:

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

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

我认为这就是一切。我希望这会为您提供足够的信息来进行您的设计。