在响应图像上放置文字

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;
            }
        }

现在，箭头根本没有响应，它们充当我要覆盖的封面（背景），但我不想放置颜色，而是要放置文本。

PS Bootstrap 2

谢谢！

Answer 1

解决我在2或3个月前建立的网站时，我几乎要完成相同的任务。 （我实际上是将文本放在圆圈内，而不是箭头内，但这是相同的原理）。 如果我向您显示CSS，则可以将其调整为箭头。

基本上，我使用绝对定位将项目彼此放置。 当然，该文本具有一个覆盖它的z索引和一个透明背景。 然后，为了使事情具有响应性，并保持与用户可能正在运行的文本大小无关，媒体查询以em为单位（而不是px）为断点。 该网站为http://www.enigmaticweb.com ，这是两个圆圈，其中包含徽标和徽标下方的标语。

棘手的一点是要完全正确地放置位置，因此无论屏幕宽度如何，这两件事都可以流畅地彼此重叠。 您将不得不使用反复试验来获得正确的位置。 这是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>

圆圈不是图像（它们实际上是由具有圆角且宽度/高度为零的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单位作为断点可确保无论用户在浏览器中使用的文本大小如何，其行为均正确。

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