HTML中的CSS代码和main.css

5
任何想法为什么当我把这段CSS代码放在main.css文件里时它不起作用? 我正在尝试制作全屏背景。

<html>
<head>
 <link rel="stylesheet" type="text/css" href="CSS/main.css">
 <style>
  .bg {
      background-image: url("nuotraukos/bg.png");
      min-height:100%;
      min-width: 100%;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
 </style>
</head>
<body>

<div class="bg"></div>

</body>
</html>


1
在这里提供一个链接到本地文件的代码片段是行不通的。 - Phiter
我知道这段代码不能作为片段运行。主要问题是为什么这个CSS代码只能在HTML样式标签之间工作,但即使它有链接到它,它也不能在main.css文件中工作。 - Tadas
1
当您尝试访问“nuotraukos/bg.png”时,是否遇到了404错误?我猜测路径不正确,因为它是从CSS/目录中读取的。 - Jonathan Kempf
@JonathanKempf,谢谢!我忘记了我的CSS文件在另一个目录中。今天我真是太糊涂了... :D 再次感谢你! :) - Tadas
3个回答

3

您的<link>似乎没有问题。请检查文件是否真实存在,以及html页面是否与CSS文件夹在同一目录下。否则,文件路径就是错误的。

如果图片未显示,则可能是因为它与.css不在同一路径下,所以您应该更改链接。

假设您的图片在向上一个文件夹的css文件中。那么,应将URL更改为以下内容:

url("../nuotraukos/bg.png");

此外,使用

设置背景并不是一个好的做法。因此,不要使用
来设置背景,而是将背景设置为<body>并拉伸它。

body {
   background-image: url("http://images.alphacoders.com/538/53823.jpg");
   background-size:cover;
}
<head>

</head>
<body>


</body>


2
也许如果您将main.css放在CSS文件夹中并更改路径,会有所帮助?
background-image: url("../nuotraukos/bg.png");

0
<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width intial-scale=1.0"/>
    <meta https-equiv="X-UA-Compatible" content="ie-edge"/>
    <title>First Website</title>
    <link rel="style-sheet" href="css/reset.css"
    <link rel="style-sheet" href="css/main.css"
</head>
<body>
<div id="Home">
    <div class="box"></div>
    <div class="background-image">
        <div class="content-area">
            <div class="user-image">
                <div class="circle">
                </div>
            </div>
        </div>
</body>
</html>

这里是编辑帮助页面。我还从你的答案中删除了75个空行,请尽量不要再这样做... - David Buck
虽然说实话,空行有时候是保持代码组织和分组的好方法 :) - corn on the cob

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接