CSS標準化文本背景

我在Drupal視圖中有一個對象網格，每個對象都有不同的標題。我正在使用CSS注入器進行更改。每個標題都有一個透明的背景，只能延伸到文字的長度。 This is what they are currently displayed 我想讓黑色背景在它後面繼續to the right edge of the image。我試圖改變寬度但背景不變。似乎無論我如何改變大小，背景仍然只填充到文本的長度。我注意到大小設置爲自動，但我認爲通過手動更改大小，它會覆蓋它。我也試圖填充添加到每個文本的右側..CSS標準化文本背景

padding-right: calc(276px - 100%);

我認爲100％的寬度將是可變的，並且從一個固定的像素量中減去，他們都將是相同的大小。不幸的是，每個標題上的填充仍然是相同的大小。這是我的代碼目前有標題的div：

.tooltitle { 
    background-color: rgba(17,17,17,.75); 
    color: white; 
    white-space: nowrap; 
    font-size: 12px; 
    position: relative; 
    top: 160px; 
    left: 6px; 
    text-decoration: none; 
    padding: .5em .7em; 
    display: inline; 
}

如何得到這些稱號的背景是同樣大小的任何想法？

來源

2017-08-11 Robbie Schab

任何機會，我們可以得到更多的代碼？設置這樣的東西也取決於標題等的父母，所以精簡的例子會很好，並會讓你更快地回答問題。 – Don

是否這樣？

.box { 
 
height: 200px; 
 
width: 200px; 
 
border: 1px solid black; 
 
position: relative; 
 
} 
 

 
.tooltitle { 
 
    background-color: rgba(17,17,17,.75); 
 
    color: white; 
 
    position: absolute; 
 
    bottom:0; 
 
    padding-top:1rem; 
 
    padding-bottom:1rem; 
 
    width:100%; 
 
}

<div class="box"> 
 
    <div class="tooltitle">Featured</div> 
 
</div>

來源

2017-08-11 19:08:11 scramlo

我看不到你的HTML，但我確實知道，在行內元素設置width不起作用。再次，它取決於你的HTML，但我敢打賭，這將工作：

.tooltitle { 
    background-color: rgba(17,17,17,.75); 
    color: white; 
    white-space: nowrap; 
    font-size: 12px; 
    position: absolute; 
    bottom: 0px; 
    left: 6px; 
    right: 6px; 
    text-decoration: none; 
    padding: .5em .7em; 
}

絕對定位，你可以指定位於沿父元素的底部。

來源

2017-08-11 19:09:05 arbuthnott

是的！非常感謝你。「設置內聯元素的寬度不起作用」救了我。我從來沒有使用CSS，所以我不知道很多'規則'。 –

太棒了，很高興它的工作！ CSS的三個方面似乎總是成爲我的麻煩來源：「display」屬性，「position」屬性和「float」/「clear」屬性。如果你迷路了，擺弄那些（或閱讀他們的文檔）往往是答案。 – arbuthnott

我會使用絕對定位。這可以節省您定義像素值的需求（儘管我在此定義了一些，因爲我沒有任何內容）。即使div的大小取決於其中的圖像，這也可以工作。

.container{ 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: lightblue; 
 
    border: 1px solid #333; 
 
} 
 

 
.title{ 
 
    font-family: sans-serif; 
 
    padding: 4px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(30, 30, 30, .8); 
 
    color: white; 
 
}

<div class="container"> 
 
    <img> 
 
    <div class="title">Title of container</div> 
 
</div>

來源

2017-08-11 19:11:28 Don

CSS標準化文本背景

回答

相關問題