为什么将 css 带线性渐变的背景图像和图像放在 html 样式标签中但放在样式表中却不起作用？

Question

我正在尝试将 CSS 带有线性渐变的背景图像和图像放入我的样式表 css 文件中，但它在添加到时不显示链接的图像CSS 文件，但在属性.

样式中确实有效

所以这在 html 文件中使用时有效：

/* In CSS File */
.topBackArea {
 padding: 0px;
 margin: 0px;
 margin-top: 10px;
 width: 100%;
 height: 300px;
 background-color: #099;
 z-index: 10;
 position: relative;
 display: block;
 overflow: visible;
}

<!-- In HTML Page -->
<div class="topBackArea" style="background-image: linear-gradient(rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, .75), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, .75), rgba(0, 0, 0, 1) 90%), url(https://background-tiles.com/overview/mixed-colors/patterns/large/1090.png); background-size: 50px auto;"></div>

但是当我将背景图像添加到 html 文件中链接的单独 css 文件时，它不显示图像，只显示渐变：

 /* This will be in a CSS File */
.topBackArea {
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    width: 100%;
    height: 300px;
    background-color: #099;
    z-index: 10;
    position: relative;
    display: block;
    overflow: visible;
    background-image: linear-gradient(rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, .75), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, .75), rgba(0, 0, 0, 1) 90%), url(https://background-tiles.com/overview/mixed-colors/patterns/large/1090.png);
    background-size: 50px auto;
}


<!-- In an HTML Page -->
<div class="topBackArea"></div>

在 CSS 文件中如何使它工作？或者这甚至可能吗？

（注意：此页面不会公开提供，它是针对本地项目，运行 in chrome。因此无需确保此页面兼容多浏览器，但拥有这些额外信息可能会对其他人有所帮助。此代码中使用的图片仅供参考。）

Answer 1

问题出在文件夹结构中。我好像忘记了 Sheetstyle 中的链接是相对于 Sheetstyle 文件的位置的。

My Folder Structure:
.
|-- images
|  |-- blue_001.png
|  |-- blue_002.png
|-- index.html
|-- stylesheet
|  |-- main.css

因此，由于 css 文件位于样式表文件夹中，而图像位于根目录下的图像文件夹中，因此我需要添加到相对路径中。我有什么：

background-image: linear-gradient(rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, .75), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, .75), rgba(0, 0, 0, 1) 90%), url(./images/blue_001.png);

我应该拥有的：

background-image: linear-gradient(rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, .75), rgba(0, 0, 0, .5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .5), rgba(0, 0, 0, .75), rgba(0, 0, 0, 1) 90%), url(../images/blue_001.png);

为什么将 css 带线性渐变的背景图像和图像放在 html 样式标签中但放在样式表中却不起作用？

Why does putting css background-image with linear-gradient and image work in the html style tag but not when put in the stylesheet?

html

css

background-image

linear-gradients