2つのスパン要素が重なり合わないようにする

2つのspanタグの間でline-heightを縮小しようとしているため、それらのタグが互いに接近して見えるようになりますが、不透明度が重なり合う問題があります。不透明度を一定に保つ方法はありますか、不透明度が重ならないように線の高さを調整するには別の方法がありますか？2つのスパン要素が重なり合わないようにする

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

出典

2017-02-19 RizJa

あなたはちょうどあなたが望む結果を得るために絶対にスパンスタイルの位置の両方を変更することができるはずです。

以下を参照してください：

<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); position: absolute"> 
 
      &nbsp;MY NAME 
 
     </span> 
 
     <br/> 
 
     <span style="background-color:rgba(0, 0, 0, .5); position: absolute"> 
 
      &nbsp;IS ABCD&nbsp; 
 
     </span> 
 
    </div>

出典

2017-02-19 03:49:51

注、位置は、コンテンツフローhttps://jsfiddle.net/2365px9q/ – Stickers

に影響を与えます絶対はい、Panglossを作ります素晴らしい点！もちろん、このソリューションが適切であることを確認するために現在のニーズに対応する必要があります。 –

@Panglossを指摘してくれてありがとう。幸いにも私の場合、このコンテンツはページのかなりの部分にまたがる画像の上に表示されているので、私が仕事を終わらせるための最もクリーンな方法です。 – RizJa

をdisplay: inline-block;にspanを設定し、必要に応じて間隔をpaddingを使用してみてください。また

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

、あなたが興味があるかもしれない - How to apply padding to every line in multi-line text?

出典

2017-02-19 04:07:10 Stickers

2つのスパン要素が重なり合わないようにする

答えて

関連する問題