-1
私はこのウェブデザインを見ていました。私はこれまでヘッダーを作っていましたが、すべてが背景イメージを除いて動作します。 私のコードに何が間違っているのか分かりません。私が間違っていることを教えてください。私は任意のCSSのリンクをしていないのです知っている背景imgは動作しません。
<!DOCTYPE html>
<html>
<head>
<title>ClassyDays</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<header>
<h2 id="nav-ico"><i class="fa fa-navicon"></i></h2>
<div id="warp-h">
<h1>CLASSY<span class="gray">DAYS</span></h1>
<h2 class="gray">A classy HTML/Css3 design by <em>my highness</em></h2>
<button>LEARN MORE</button>
</div>
</header>
<!--intro--><section id="sec1"></section>
<!--features--><section id="sec2"></section>
<!--feat-det--><section id="sec3"></section>
<!--seprate--><section id="sec4"></section>
<!--feat-pic--><section id="sec5"></section>
<!--button-sep--><section id="sec6"></section>
<!--team--><section id="sec7"></section>
<!--login--><section id="sec8"></section>
<!--socail-media--><section id="sec9"></section>
<footer></footer>
</body>
</html>
、これは私のCSS（SCSS）コード
//colors
$black: #353535;
$grey: #a1a9b0;
$darkblue: #242830;
$button: #3dc9b3;
$button-shadow: #309383;
//size
$h1: 2em;
$h2: 1.25em;
$body: 1em;
//font (only one)
$font: 'Lato', sans-serif;
* {
}
body {
color: $grey;
font-size: $body;
text-align: center;
font-family: $font;
}
.gray {
color: $grey;
}
h1 {
color: $black;
font-size: $h1;
}
h2 {
color: $black;
font-size: $h2;
}
header {
display:block;
background: url(img/header.png);
width: 100%;
overflow: auto;
#nav-ico {
float: right;
padding: .5 * $body 7 * $body;
:hover {
color: $grey;
}
}
#warp-h {
margin: auto;
padding: 4 * $h1;
}
button {
font-family: $font;
font-size: $body;
padding: .5 * $body $body;
margin: 2 * $body;
border: none;
border-radius: .5 * $body;
background: $button;
border-bottom: 4px solid $button-shadow;
text-align: center;
text-decoration: none;
color: white;
width: 10.25em;
height: 3.5em;
}
}
です： 私は完全なSCSSとhtmlコード
HTMLを配置します（色、サイズ、パディングなど） に問題はありません。私はその場所と画像そのものを変更しているため、画像やリンクに問題があるとは思われません（私が使用した画像以前はプロジェクトで）しかしnoth 私は、スペルミスがあった場合に備えて、インターネットから何度もその行をコピーして貼り付けようとしましたが、もう一度スペルミスしませんでした。
編集：ありがとうございました！興味のある人に 、基本的に私は、ウェブサイト自体のCSSファイルへのリンクRELATIVEを作るのを忘れない
ブラウザのソースビューアで画像の全URLを確認しようとしましたか？相対パスではなくパス絶対パスを作成する前にスラッシュを追加してみてください。 – ElChupacabra
コンソールをチェックし、エラー –
を見てください。あなたが言ったようにすべてが仮定されていれば、それは 'img/header.png'が正しくないからです。パスはCSSファイルに関連している必要があることに注意してください。 – Adam