CSS的背景在Base.html中不起作用答案

【问题标题】：Background from CSS not working in Base.htmlCSS的背景在Base.html中不起作用
【发布时间】：2020-03-29 21:44:31
【问题描述】：

以下 base.html 代码未从同一文件夹中的 css 文件实现渐变背景。

base.html:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" text="text/css" href="templates/css/style.css">
  </head>

<body>
<h1>hi</h1>
</body>
</html>

style.css：

body {
background: linear-gradient(to bottom, #faaca8, #ddd6f3);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;

}

【问题讨论】：

如果在同一个文件夹，为什么href没有设置为./style.css？
你的意思是它根本不起作用？或者只是没有像你想要的那样覆盖整个页面？
将您的 link 更改为 <link rel="stylesheet" text="text/css" href="style.css"> - 您当前正尝试从当前位置进入文件夹 /templates，这显然没有意义，因为 css 在当前文件夹中.
检查你的css路径。

标签： html css background-image gradient css-gradients

【解决方案1】：

如果这不起作用，则问题在于您引用的目录与您想要的 style.css 文件夹不同。如果在同一个文件夹中，请将链接中的href改为href="style.css"。

这是假设您有一个包含 base.html 的文件夹，并且在 SAME 文件夹中，还有 style.css 样式表。

如果它基于根目录，您将使用/style.css，或者在之前的文件夹中使用../foldername/style.css。更多信息，read here.

【讨论】：

【解决方案2】：

text="text/css" 应该是 type="text/css"

【讨论】：

【解决方案3】：

将css代码放在body标签中，或者你可以这样做

   body {
    background: linear-gradient(to bottom, #faaca8, #ddd6f3);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

    <!doctype html>
    <html lang="en">
      <head>
    <link rel="stylesheet" type="text/css" href="style.css">  </head>
    
    <body>
    <h1>hi</h1>
    
    
   
    </body>
    </html>

【讨论】：