此背景图片不会显示html和css

Question

我刚刚开始学习 html 和 css，我不明白为什么当我运行文件时背景图像不会显示，我看到的只是角落里的“第一个网站”

* {
  margin: 0;
  padding: 0;
}

.header {
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7), url(images/dhmkbannan.png));
  background-position: center;
  background-size: cover;
  position: relative;
}

<section class="header">

</section>

Answer 1

您在错误的位置关闭了括号。

background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(images/dhmkbannan.png);

Answer 2

您的右括号位置错误。您将图像 URL 提供给

linear-gradient

属性，而不是

background-image

属性。

而不是

background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7), url(images/dhmkbannan.png)); 

尝试

background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(https://picsum.photos/500);

* {
  margin: 0;
  padding: 0;
}

.header {
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(https://picsum.photos/500);
  background-position: center;
  background-size: cover;
  position: relative;
}

<section class="header">

</section>

Answer 3

您没有在

background-image

属性中提供图像

Answer 4

请这样使用

background-image: url("images/dhmkbannan.png"), linear-gradient(#eb01a5, #d13531); /* W3C */

你把括号放在错误的地方另外，你应该了解背景分层

层堆栈

需要注意的是，第一个定义的图像将位于堆栈的最顶层。在这种情况下，图像位于渐变的顶部。

有关背景分层的更多信息，请查看此链接http://www.w3.org/TR/css3-background/#layering。

Answer 5

代替背景图像：线性渐变(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7), url(images/dhmkbannan.png));

尝试删除网址中的图像： 背景图像：线性渐变(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7), url(dhmkbannan.png));