Question

我看到了这个我想尝试制作的网页设计..到目前为止，我已经制作了标题，除了背景图像外，一切都有效。我不知道我的代码有什么问题..请告诉我我做错了什么。我将把完整的scss和html代码

HTML：

<!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;
  }
}

我知道我没有犯任何css链接错误，因为它基本上适用于所有内容（颜色，大小，填充等）我也不相信问题出在图片或其链接上，因为我已经改变了它的位置和图片本身（我把一张我以前用过的图像放在一个项目中）但没有任何工作我曾尝试从互联网上多次复制粘贴该行，以防万一我有拼写错误，但我又没有拼错

编辑：谢谢！对任何感兴趣的人，基本上我忘了把链接RELATIVE到css文件而不是网站本身

Answer 1

我怀疑你的背景图片与CSS文件无关......

background: url(/img/header.png);

如果您的图片位于your-site.com/img/header.png

，则该图片应该有效

背景img没有工作css

1 个答案: