Question

我试图减少两个line-height代码之间的span，以便它们看起来更近，但问题是这样做会重叠不透明度。有没有办法保持不透明度一致，还是有另一种方法可以调整线条高度而不会出现不透明度重叠？

＆＃13;

<div style="text-align:left; font-size: 20vh; color:white; line-height: 18.2vh; padding: 5vw; margin-bottom:-15px;">
  <span style="background-color:rgba(0, 0, 0, .5);">
      &nbsp;MY NAME
  </span>
  <br/>
  <span style="background-color:rgba(0, 0, 0, .5);">
      &nbsp;IS ABCD&nbsp;
  </span>
</div>

＆＃13;

Answer 1

您应该能够将两个跨度样式位置更改为绝对位置以获得所需的结果。

请参阅以下内容：

TweenMax.to(".ease-out", 6, {x:600, ease:Back.easeOut});

Answer 2

尝试将span设置为display: inline-block;，并根据需要使用padding作为间距。

＆＃13;

<div style="text-align:left; font-size: 20vh; color:white; line-height: 18.2vh; padding: 5vw; margin-bottom:-15px;">
  <span style="background-color:rgba(0, 0, 0, .5); padding: 10px 10px 0 10px; display: inline-block;">MY NAME</span>
  <br/>
  <span style="background-color:rgba(0, 0, 0, .5); padding: 0 10px 10px 10px; display: inline-block;">IS ABCD</span>
</div>

＆＃13;

另外，您可能对 - How to apply padding to every line in multi-line text?

感兴趣

防止两个跨度元素重叠

2 个答案: