Почему размещение css background-image с линейным градиентом и изображением работает в теге стиля html, но не при добавлении в таблицу стилей? - PullRequest
Новая
       65

Почему размещение css background-image с линейным градиентом и изображением работает в теге стиля html, но не при добавлении в таблицу стилей?

0 голосов
/ 28 февраля 2020

Я пытаюсь поместить CSS background-image с линейным градиентом и изображением в файл css таблицы стилей, но он не показывает изображение, связанное при добавлении в файл CSS, но работает, когда используется в свойстве style.

Так что это работает при использовании в файле 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>

Но когда я добавляю фоновое изображение в отдельный файл css, связанный с файлом html, он не показывает изображение, только градиент: 

 /* 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. Поэтому нет необходимости обеспечивать совместимость с несколькими браузерами. , но наличие этой дополнительной информации может помочь другим. Изображение, используемое в этом коде, просто для примера.)

1 Ответ

0 голосов
/ 29 февраля 2020

Проблема была в структуре папок. Кажется, я забыл, что ссылки в Sheetstyle относятся к местоположению файла Sheetsytle. 

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

Так как файл css находится в папке таблиц стилей, а изображения в папке images из root, мне нужно было добавить к относительному пути. Что у меня было: 

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