为什么将带有线性渐变和图像的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?为什么将带有线性渐变和图像的css背景图像放在html样式标签中，但放在样式表中时却不行？
【发布时间】：2020-02-28 18:47:47
【问题描述】：

我正在尝试将带有线性渐变的 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 文件中如何让它工作？或者这甚至可能吗？

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

【问题讨论】：

分享 HTML。您确定正在读取 CSS 文件吗？
如果您无法在 sn-p 中重现它，我们无能为力。
如果您在 CSS 样式表中有 大量其他内容，是否会覆盖背景图像？如果它在您将其内联时有效，则它将优先于样式表样式。
@asmith 你确定样式没有被某种方式覆盖吗？发生这种情况没有内在原因，但内联 CSS 比外部样式表具有更高的特异性（优先级）

标签： html css background-image linear-gradients

【解决方案1】：

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

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

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

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);

【讨论】：