定位背景图像

Question

我在使用h1标签定位背景图像时遇到问题

我的代码：js小提琴

当我放入font-size: 18px时，我有想要的输出，但我想要更大的字体。

无论我在css中键入什么，我都无法将其定位为我想要的位置。

有人能帮我吗？

谢谢。

Answer 1

我给宽度

<h1> 

标签并给出背景大小：100%；http://jsfiddle.net/tw3jrbhc/1/

.role h1 {
 width:1400px;
background: url("http://i57.tinypic.com/2167bt.png") no-repeat scroll center center transparent;
background-position:center;
background-size:100%;
color: #000;
font-size: 25px;
font-weight: normal;
margin: 15px 0 15px;
text-align: center;
text-transform: none;
}

Answer 2

如果您想要灵活/可控的东西，可以使用各种字体大小，您应该考虑使用：before pseudo-element:

.role h1::before {
    content:'';
    background: url("http://i57.tinypic.com/2167bt.png") no-repeat right center;
    display: inline-block;
    width: 224px;
    height: 24px;
    vertical-align: middle;
}

http://jsfiddle.net/tw3jrbhc/3/

.role {
    width: 1030px;
    margin: 0 auto;
}
.role h1 {
    color: #000;
    font-size: 25px;
    font-weight: normal;
    margin: 15px 0 15px;
    text-align: center;
    text-transform: none;
}
.role h1::before {
    content:'';
    background: url("http://i57.tinypic.com/2167bt.png") no-repeat right center;
    display: inline-block;
    width: 224px;
    height: 24px;
    vertical-align: middle;
}

<div class="role">
     <h1>Loremloremaa Lorembb Loremlorema Loremlor aa Lorema Loremlor</h1>
    </div>