Question

我试图插入背景图片作为我的标题的背景。如果我使用背景颜色作为标题

的背景，那就顺利了

h2 {
    background-color: red;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em ;
    text-transform: uppercase;
}

然而，对于背景图像来说它并不顺利....

代码：

h2 {
    background-image: url("gear.png");
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em ;
    text-transform: uppercase;
}

有人可以指导我解决问题吗？我非常感谢你的帮助。 THX

Answer 1

请参阅background-position和background-repeat。

h2 {
    background-image: url("gear.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
}

Answer 2

我认为最好的方法是将你的h2包装成div。它的外观和样式会更好。

<div style="padding:15px;background-image:url('gear.png');background-repeat:no-repeat;">
<h2>This is your header</h2>
</div>

还要确保图像与HTML文件位于同一文件夹中

Answer 3

您有两个选择：

您可以将背景添加为h2背景：

h2 {
    background-image: url("http://www.pawelkaim.com/img/videoEditingIreland.png");
    background-repeat:no-repeat;
    background-position: 0 0;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 1.5em ;
    text-transform: uppercase;

}

但这可能不是最佳解决方案。

我建议你创建额外的div并在其中放入一个h2标签：

<div class="bg"> <h1> Hello world</h1></div>

.bg{
    background-image: url("http://www.pawelkaim.com/img/videoEditingIreland.png");
    background-repeat:no-repeat;
    width: 300px;
    height:200px;
}

在这种情况下，您可以调整div的宽度和高度值以获得最佳外观。你也可以用Css定位你的标题。

h1{
padding-left: 50px;
padding-top:50px;
}

这是fiddle

CSS：将背景图像插入标题

3 个答案: