背景图片上的中心文字

我在定位背景图片的垂直和水平中间的文字时很挣扎。我的背景图像是一个总是具有相同尺寸的徽章，我的文字最上面是一个带有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

背景图片上的中心文字

回答

相关问题