【问题标题】:background-image not appearing always [closed]背景图像并不总是出现[关闭]
【发布时间】:2022-01-24 00:44:21
【问题描述】:

我正在尝试将背景图片放在标题中,但它没有出现

header{
width: 100vw;
height: 100vh;
background-image: url("../img/header-bg.png");
background-position: bottom;
background-size: cover;
align-items: flex-end;
display: flex;
justify-content: center;
}```

【问题讨论】:

  • 您是否尝试将margin: 0; 放入正文选择器中?我认为这会有所帮助

标签: html css background-image


【解决方案1】:

试着把这个 css 放进去

body {
    margin: 0;
}

这是正常的,这是因为默认情况下浏览器会在正文上放置一个边距...使用我在上面编写的 css 删除该默认边距


其他方式也在使用

  • position: absolute
  • fixed

  • top:0;
  • left:0;

body {
    margin: 0;
}

header {
    width: 100vw;
    height: 100vh;
    background-image: url("https://laaouatni.github.io/w11-clone/images/1dark.jpg");
    background-position: center;
    background-size: cover;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
</body>

</html>

【讨论】:

    猜你喜欢
    • 2010-12-02
    • 2014-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多