Question

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

我的代码： js fiddle

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

无论我输入什么内容，我都无法按照自己的意愿定位。

有人可以帮助我吗？

谢谢。

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伪元素：

.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/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

定位背景图像

2 个答案: