在 HTML 中引用时显示背景图像，但在 CSS 中引用时不显示

Question

我的css文件和我的html文件在同一个目录下，背景图片文件在images目录下。如果我将它直接放入 body 标签中，它就会显示出来，但如果我在 css 文件中引用它，它就会显示出来。目录结构是root - images, html & css 在root中，图片在images中。

HTML:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> title </title>
<meta name="Author" content="me">
<meta name="Description" content="Description.">
<meta name="Keywords" content="blah blah">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display|Lobster+Two:700' rel='stylesheet' type='text/css'>

</head>
<body>

...当然还有文件的其余部分，以 </body></html> 结尾。

CSS:

body {
    padding: none; 
    margin: auto;
    background: #ccc url("images/mainbg.jpg") repeat-x fixed top left, url("images/body-x2.png") repeat-x fixed bottom left;
}

Answer 1

删除背景颜色声明 #ccc，并确保如果 <body> 中没有内容，您还声明了 100vh 或类似的高度。

codepen example

在 HTML 中引用时显示背景图像，但在 CSS 中引用时不显示

Background image shows when referenced in HTML but not when referenced in CSS

html

css

background

background-image