background-image не работает при использовании во внешней таблице стилей, отлично работает при использовании тега <style>в html - PullRequest
Новая
       6

background-image не работает при использовании во внешней таблице стилей, отлично работает при использовании тега <style>в html

1 голос
/ 04 мая 2020

HTML КОД: (изображение присутствует в правильном каталоге) 

    <html lang="en-US">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles/style.css">     
</head>
<body>
    <header>
        <h1>Sample Header</h1>
    </header>
    <main>
        <article>
            <h2>Sample Header 2</h2>
            <p>Sample Paragraph 1</p>        
            <p>Sample Paragraph 2</p>
        </article>
    </main>
</body>

CSS КОД: 

html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}

background-image делает не работает в приведенной выше форме, но когда тот же css -код включен в тег style, background-image отлично работает, почему бы не во внешней таблице стилей?

1 Ответ

0 голосов
/ 05 мая 2020

Я думаю, что это проблема пути для background-image: url(...). Я не могу воспроизвести в данный момент из-за недостатка информации, но, пожалуйста, помните о структуре вашей папки. Когда вы используете <style> для CSS, отправной точкой для относительного пути является ваша папка root (или там, где находится HTML).

В случае style.css отправной точкой это папка styles. Так что помните, что в этом случае путь может измениться. Вы можете использовать Firefox инструменты разработчика или Chrome инструменты разработчика , чтобы изменить свой путь на лету. Таким образом, вы можете легко узнать, откуда возникла проблема с путем, или правильно ли было применено правило background-image к вашему элементу.

Обновлено: добавлены ссылки на инструменты разработчика (Mozilla) , Google)

...