透明文本背景重疊

所以我一直在使用克里斯的文章https://css-tricks.com/multi-line-padded-text/來幫助我獲得一些帶有背景的居中文本。唯一的問題是我希望背景是半透明的，我想不出一種辦法。我玩線高和填充，但不能提出解決方案。透明文本背景重疊

我想要做的是停止每行重疊的背景，但確保每行之間的空間相同。

<div class="ui-section__component"> 
    <div class="comp--hero-text"> 
    <h2>You're all clear, kid. Let's blow this thing and go home! You're all clear, kid. Let's blow this thing and go home!</h2> 
    </div> 
    </div> 


$white: #fff; 
$max-width: 1024px; 
$small-spacing: 0.75em; 

.ui-section__component{ 
    background-color: green; 
    display: flex; 
    height: 500px; 
    width: 700px; 
} 

.comp--hero-text { 
    align-self: center; 
    margin: 0 auto; 
    max-width: $max-width - 200px; 
    text-align: center; 
    width: 80%; 

    h2 { 
    background-color: rgba($white, 0.85); 
    box-decoration-break: clone; 
    box-shadow: $small-spacing/2 0 0 rgba($white, 0.85), -$small-spacing/2 0 0 rgba($white, 0.85); 
    display: inline; 
    line-height: 1.5; 
    padding: 0.5em 0; 
    } 
}

我的代碼可以在代碼筆中找到：http://codepen.io/rmaspero/pen/VmVwNx

來源

2016-12-14 rmaspero

充分利用line-height: 1.2爲.comp--hero-text h2，如：

.comp--hero-text h2 { 
    line-height: 2.2; 
}

看一看下面的代碼片段：

.ui-section__component { 
 
    background-color: green; 
 
    display: flex; 
 
    height: 500px; 
 
    width: 700px; 
 
} 
 

 
.comp--hero-text { 
 
    align-self: center; 
 
    margin: 0 auto; 
 
    max-width: 824px; 
 
    text-align: center; 
 
    width: 80%; 
 
} 
 
.comp--hero-text h2 { 
 
    background-color: rgba(255, 255, 255, 0.85); 
 
    box-decoration-break: clone; 
 
    box-shadow: 0.375em 0 0 rgba(255, 255, 255, 0.85), -0.375em 0 0 rgba(255, 255, 255, 0.85); 
 
    display: inline; 
 
    line-height: 1.5; 
 
    padding: 0.15em 0; 
 
}

<div class="ui-section__component"> 
 
    <div class="comp--hero-text"> 
 
    <h2>You're all clear, kid. Let's blow this thing and go home! You're all clear, kid. Let's blow this thing and go home!</h2> 
 
    </div> 
 
    </div>

希望這會有所幫助！

來源

2016-12-14 17:39:51

問題有兩次每條線之間的差距比你在最後的第一個和最後一個 – rmaspero

@rmaspero的頂部做的差距看看我更新的答案，我已經調整了填充和行高。讓我知道這是否適合你。 –

我想你可以通過消除背景顏色的alpha通道並將其更改爲rgb類似的顏色來解決此問題。是我能找出的最簡單的解決方案。

h2 { 
     background-color: #f6f9f4; 
     box-decoration-break: clone; 
     box-shadow: $small-spacing/2 0 0 rgba($white, 0.85), -$small-spacing/2 0 0 #f6f9f4; 
     display: inline; 
     line-height: 1.5; 
     padding: 0.5em 0; 
     }

來源

2016-12-14 17:40:15 sebasaenz

重點是我希望它是半透明的，因爲背景會有所不同，並不總是塊的顏色。 – rmaspero

可以降低行高「補償 - 英雄文本H2」

 
     .comp--hero-text h2{ 
      line-height: 2; 
     }

或者你可以用現在這是你調整填充

 
     .comp--hero-text h2{ 
      padding: .2em 0; 
     }

來源

2016-12-14 18:20:25 ekta

這就是你的問題，現在每條線之間的差距比你在最後一個和最後一個之間的差距大一倍。 – rmaspero

透明文本背景重疊

回答

相關問題