Question

我已尝试过所有内容，但标题的背景图片未显示在浏览器中

在请求标题中

我得到了这个显示临时标题 User-Agent：Mozilla / 5.0（Windows NT 6.1; WOW64）AppleWebKit / 537.36（KHTML，类似Gecko）Chrome / 54.0.2825.0 Safari / 537.36

＆＃13;

//Parallax
 .bird-box {
  position: relative;
  height: 600px;
  background-image: url(../images/bird-bg.jpg);
  background-size: contain;
  background-position: top center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>BlackBird Co.</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-      scale=1">
  <link rel="icon" type="image/png" href="images/favicon.png">
</head>

<body>
  <link rel="stylesheet" href="css/style.css">
  <header class="bird-box">
    <div class="back-bird"></div>
    <div class="logo"></div>
    <div class="fore-bird"></div>
  </header>

</body>

</html>

＆＃13;

Answer 1

CSS评论语法为/* comment here */。它不支持行注释。

此：

//Parallax .bird-box

...是一个无效的选择器，与您的元素不匹配。

将评论更改为有效的CSS。

Answer 2

您使用了错误的CSS注释语法！正确的是/* comment */。不幸的是，CSS中没有一行注释。您可以在MDN了解更多相关信息。

＆＃13;

/* Parallax */
 .bird-box {
  position: relative;
  height: 600px;
  background-image: url(https://unsplash.it/600/300);
  background-size: contain;
  background-position: top center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>BlackBird Co.</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-      scale=1">
  <link rel="icon" type="image/png" href="images/favicon.png">
</head>

<body>
  <link rel="stylesheet" href="css/style.css">
  <header class="bird-box">
    <div class="back-bird"></div>
    <div class="logo"></div>
    <div class="fore-bird"></div>
  </header>

</body>

</html>

＆＃13;

background-image在标题上没有响应

2 个答案: