在未知尺寸的標題上設置背景顏色

我有一個html模板，顯示post.title，由用戶輸入。在未知尺寸的標題上設置背景顏色

<section id="home" class=""> 
    <h1 class="main-heading"><%= @post.title %></h1> 
    </section>

用戶標題的長度未知。它可以是（例如）5,20或100個字符。

我想提出一個低透明度的黑色背景後面的文字，以幫助讀者區分標題：

.main-heading { 
    /*TEXT ON MAIN PIC*/ 
    height: 20%; 
    width: auto; 
    padding: 20px; 
    font-family: 'Open sans', sans-serif; 
    font-size: 95px; 
    font-weight: 300; 
    text-align: center; 
    letter-spacing: 9px; 
    text-transform: uppercase; 
    text-shadow: 2px 2px 2px rgba(100,100,100,0.6); 
    background-color: rgba(10,10,10,0.2); 
}

我可以調整高度和寬度可預見的頭銜，但不知道如何將這些值應用於大小不同的標題。

來源

2017-08-12 RubyRube

您可以使用['文本-shadow']（https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow）？ – jhpratt

是的，但是對於字母造型來說最好。我更喜歡一個圍繞標題的框，類似於這個codepen：https：//codepen.io/bennettfeely/pen/xyufl – RubyRube

添加一個背景顏色，並使用'display：inline [-block]'使它不採取整個屏幕寬度 –

我的建議是添加一個包裝，然後你可以風格。

.main-heading { 
 
    /*TEXT ON MAIN PIC*/ 
 
    height: 20%; 
 
    width: auto; 
 
    padding: 20px; 
 
    font-family: 'Open sans', sans-serif; 
 
    font-size: 95px; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    letter-spacing: 9px; 
 
    text-transform: uppercase; 
 
    text-shadow: 2px 2px 2px rgba(100,100,100,0.6); 
 
} 
 

 
.background { 
 
    background-color: rgba(10,10,10,0.2); 
 
}

<section id="home" class=""> 
 
    <h1 class="main-heading"> 
 
     <span class="background"> 
 
      foobar 
 
     </span> 
 
    </h1> 
 
</section>

我認爲這是你在找什麼，這是很簡單的爲好。當然，您可以設置display: inline-block並隨意添加填充/邊距。

來源

2017-08-12 23:54:28 jhpratt

這是有道理的。我猜想流體包裝是一種解決方案。我會接受，當我得到它的工作。謝謝。 – RubyRube

是的，我不確定還有其他方法可以解決這個問題，而且它增加了複雜度。 – jhpratt

裹TE <%= @post.title %>成span（該h1內），適用於你的造型到跨度並添加display: inline-block到它：

.main-heading>span { 
 
    display: inline-block; 
 
    height: 20%; 
 
    width: auto; 
 
    padding: 20px; 
 
    font-family: 'Open sans', sans-serif; 
 
    font-size: 32px; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    letter-spacing: 9px; 
 
    text-transform: uppercase; 
 
    text-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6); 
 
    background-color: rgba(10, 10, 10, 0.2); 
 
}

<section id="home" class=""> 
 
    <h1 class="main-heading"><span><%= @post.title %></span></h1> 
 
</section>

來源

2017-08-13 01:14:20 Johannes

單獨的包裝，類似於jhpratt的答案。謝謝，現在更清楚。 – RubyRube

在未知尺寸的標題上設置背景顏色

回答

相關問題