Question

我正在尝试在动态容器上实现bigtext。我把它与fittext巧妙地配合使用，但我更喜欢大文本的大小调整。

有谁知道如何防止文本与bigtext重叠？

这是HTML测试代码：

<div id="fittextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
  <img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
  <div id="fittext" class="containerText">
    Fittext. Make better decisions where location matters
  </div>
</div>

<div id="bigtextContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
  <img class="imgTower" src="{{=URL('static','images/tower_.png')}}"/>
  <div id="bigtext" class="containerText">
    <span>BigText</span><span>Make better</span><span>decisions where location matters</span>
  </div>
</div>

这是CSS：

#fittextContainer {
    position: relative;
    width: 100%;
    height: auto;
    background-size: cover;
}

#bigtextContainer {
    position: relative;
    width: 100%;
    height: auto;
    background-size: cover;
}

.imgTower {
    width: 100%;
    height: auto;
}

.containerText {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    height: auto;
    text-align: center;
    color: white;
    line-height: 1em;
    font-weight: 700;
    opacity: 0.8;
    text-shadow: 3px 3px #3f51b5;
}

这就是它的样子：

Answer 1

你好。我自己很难对它进行测试，因为我不能测量你的形象（如果你能把它写下来会很好）。首先，我建议你将div中的图像与css行集成：

background-image: url();

你也可以尝试使用一些填充，不要使用固定值（如x em）或某些东西而不是auto。根据我的经验，汽车会搞砸很多东西。

干杯，丹尼尔。

Answer 2

好的，我现在已经把这个弄糊涂了。行高需要设置为正常，页面是游戏。

line-height: normal;

我之前完全删除了line-height属性，并假设normal是line-height的默认值。但事实似乎并非如此。或者我可能通过使用标准化CSS更改了假定的默认值。

我还删除了高度：自动指令，这些都不是使这项工作所必需的。

这是更新的html：

    <div class="imgContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
        <img class="imgTransparent" src="{{=URL('static','images/tower_.png')}}"/>
        <div id="fittext" class="containerText">Make better decisions where location matters</div>
    </div>


    <div class="imgContainer" style="background-image: url({{=URL('static','images/tower.jpg')}})">
        <img class="imgTransparent" src="{{=URL('static','images/tower_.png')}}"/>
        <div id="bigtext" class="containerText"><span>Make better</span><span>decisions where location matters</span></div>
    </div>

这是更新的CSS：

.imgContainer {
    position: relative;
    width: 100%;
    background-size: cover;
}

.imgTransparent {
    width: 100%;
}

.containerText {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    text-align: center;
    color: white;
    line-height: normal;
    font-weight: 700;
    opacity: 0.8;
    text-shadow: 3px 3px #3f51b5;
}

结果如下（fittext在上面）：

垂直间距（线高）与BigText

2 个答案: