Question

这是我在Stackoverflow上的第一个问题（和第一篇文章）。一旦我变得足够熟练，希望能做出更多贡献。

无论如何，当我使用与html内联的css引用它时，我无法理解为什么我的背景图像出现了，但是当我将它放在html链接到的单独的css样式表中时却没有。

以下是我的内联css的样子，效果很好：

<style>
    body {
        background: url('background.jpg') center center fixed;
        background-size: cover;
    }
</style>

我的styles.css文件如下所示，其中包含完全相同的代码：

<style>

	body {

		background: url('background.jpg') center center fixed;
		background-size: cover;
	}

	p {

		font-family: 'Helvetica Neue' Helvetica;
		font-color: white;

	}

	h1 {

		color: white;
		font-family: 'Helvetica Neue';
		font-size: 3.5em;
		text-align: center
	}

	.textbox {

		background-color: beige;
		height: 100px;
		width: 100px;
		padding: 10px;
		margin: 50px auto;
		text-align: center;
		font-family: 'Helvetica Neue' Helvetica;
		font-weight: 200;

	}


</style>

...但它不再显示背景图片。 css文件中的所有其他内容（段落格式，文本大小/颜色等）都显示在浏览器中。

此外，html文件，css文件和背景图片都在同一目录中。所以我想我不需要使用“/background.jpg”，“../ background.jpg“等我在其他帖子中看到过Stackoverflow上的其他帖子。

我试图找到答案但找不到答案。非常感谢任何帮助！

Answer 1

但是，在一个单独的.css文件中，我键入了与上面完全相同的代码，使用以下命令链接到html文件中：

您是否删除了<style>＆amp; CSS文件中的</style>个标签？例如，像：

body {
    background: url('background.jpg') center center fixed;
    background-size: cover;
}

如果您将CSS直接包含在HTML中，则只需要围绕CSS规则使用这些HTML代码。

Answer 2

我需要查看你的文件和文件夹结构..确保你所引用的样式表在html所在的同一个文件夹中，如果是这样，相同的代码将会这样做..如果你的css在另一个文件夹中就像在css / styles.css比你必须更改链接以及样式表的href类似于../ image.png

文件夹结构在这里很重要

Answer 3

从.css文件中取出样式标记。

CSS背景图片仅用于内联html

3 个答案: