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索引和透明背景。然后为了使事物具有响应性，并保持用户可能正在运行的任何文本大小，媒体查询都有以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单位可确保其在浏览器中使用的文本大小正确无误。

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

将文本放在响应式图像上

1 个答案: