CSS：将背景图像插入标题答案

【问题标题】：CSS: Inserting a background image into a HeaderCSS：将背景图像插入标题
【发布时间】：2022-02-14 10:04:45
【问题描述】：

我试图插入背景图像作为我的标题的背景。如果我要使用背景颜色作为标题的背景，那就很好了

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

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

【问题讨论】：

定义“不顺利”。
你还能显示 HTML 吗？
图片的路径是否正确？用萤火虫检查。
gear.png 是否与您的 CSS 位于同一目录中？否则，您需要确保图像的路径正确。那是我第一次看的地方，没有看到你的 HTML。
是的，我确实将它放入与我的 html 文件夹相同的目录文件夹中。 “不顺利”是指图像的位置不适合，意味着它只在标题部分显示而不是适合它。

标签： html css header background-image

【解决方案1】：

我认为最好的方法是将你的 h2 包装在一个 div 中。它的外观和风格会更好。

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

还要确保图片与您的 HTML 文件位于同一文件夹中

【讨论】：

【解决方案2】：

请参阅 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;
}

【讨论】：

背景样式也可以简写成background:url(gear.png) no-repeat top left;

【解决方案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

【讨论】：