背景圖片上的中心文字

我在定位背景圖片的垂直和水平中間的文字時很掙扎。我的背景圖像是一個總是具有相同尺寸的徽章，我的文字最上面是一個帶有1或2位數的數字。所有這一切都是我的標題。背景圖片上的中心文字

HTML：

<h1> 
    <span class="playerlevel"> 
    <strong>12</strong> 
    </span> 
    player 
    <span class="playertag"> #tag</span> 
</h1>

CSS

.playerlevel strong { 
    height: 28px; 
    width: 28px; 
    padding: 0; 
    margin: 0; 
    line-height: 28px; 
    font-size: 18px; 
    font-weight: normal; 
    text-align: center; 
    background-image: url(http://i.imgur.com/IuhiyzQ.png); 
    color: #fff; 
} 

.playertag { 
    font-size: 1rem; 
}

的結果應該如何看待這樣的：

什麼我的代碼創建：

的jsfiddle：

https://jsfiddle.net/nafhLz1w/

來源

2017-04-14 kentor

像這樣：https://jsfiddle.net/3kmzh34m/ – Mazz

使用的背景大小作爲封面與一些填充

片斷如下

.playerlevel strong { 
 
    height: 28px; 
 
    width: 28px; 
 
    padding: 0; 
 
    margin: 0; 
 
    line-height: 28px; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    text-align: center; 
 
    background-image: url(http://i.imgur.com/IuhiyzQ.png); 
 
    background-size:cover; 
 
    padding:10px; 
 
    color: #fff; 
 
} 
 

 
.playertag { 
 
    font-size: 1rem; 
 
}

<h1> 
 
    <span class="playerlevel"> 
 
    <strong>12</strong> 
 
    </span> 
 
    player 
 
    <span class="playertag"> #tag</span> 
 
</h1>

來源

2017-04-14 13:37:24 repzero

你需要設置2個屬性：background-size: cover;和填充例如padding: 10px;

的jsfiddle：https://jsfiddle.net/hwkkr877/

來源

2017-04-14 13:36:06 Mazz

看起來並不像一個堅實的解決方案，我說：http://i.imgur.com/puu0FwT.png。顯然，我可能只是將這些值搞砸了，直到它適合我的例子。另外它似乎在Y軸上重複 – kentor

重複可以通過使用background-repeat禁用：no-repeat;屬性。像這樣：https：// jsfiddle。net/nafhLz1w/5/ –

只需添加 '顯示：內聯塊;'到你的CSS。

來源

2017-04-14 13:36:41 Martina

我認爲你只是缺少display:block;或display:inline-block屬性。

添加它將使數顯示正確的背景圖像上：https://jsfiddle.net/nafhLz1w/1/

旁註：我不但是建議包裹的這一切都在一個H1標籤，雖然，這不是處理一個好辦法。而是將其包裝在一個div或另一個塊元素中。

來源

2017-04-14 13:37:04

我以爲相同，但我找不到一個更好的方式將該圖像+文本放在標題 – kentor

的前面。然後，您可以使用display：inline-block元素，或者您可能可以也可以使用background-size：cover屬性使其工作，如下面的用戶所示：repzero –

像這樣：https：//jsfiddle.net/nafhLz1w/3/ –

這必將工作。

.playerlevel { 
display: inline-block; 
} 

.playerlevel strong { 
background-image: url("http://i.imgur.com/IuhiyzQ.png"); 
background-size: contain; 
color: #fff; 
display: inline-block; 
font-size: 14px; 
font-weight: normal; 
height: 28px; 
line-height: 28px; 
margin: 0; 
padding: 0; 
text-align: center; 
width: 28px; 
}

來源

2017-04-14 13:43:42 Pankaj

背景圖片上的中心文字

回答

相關問題