CSS：将背景图像插入标题

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

有人可以指导我找到解决方案吗？我非常感谢你的帮助。谢谢

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

您有 2 个选择：

您可以添加背景作为 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;
}

这是一个小提琴