Question

我有简单的html和CSS，如下所示：

<body>
    <header>
        <div class="top-bar">
            <!-- Hamburger menu-->
            <div class="hamburger-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <!-- Logo-->
            <div class="logo"></div>
        </div>
        <div class="prod-thumbnail"></div>
    </header>
</body>

/***** General styles ******/
html {
    font-size: 16px;
    height: 100%;
}

body {
    font-size: 1.2rem;
    line-height: 0.7rem;
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

/***** Header styles ******/
header {
    display: block;
    height: 30%;
    width: 100%;
    position: relative;
}

header .top-bar {
    z-index: 2;
}

header .prod-thumbnail {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #bbb url(../images/some-image.png);
    background-size: cover;
    background-position: 0 0;
    z-index: 1;
}

我打算为prod-thumbnail div提供背景图像，并在top-bar中创建导航菜单。我已经相对于标题定位了prod-thumbnail。根据位置，prod-thumbnail div应该从浏览器的左上方开始（背景#bbb从浏览器的左上方开始），但是我的背景图片不是从顶部开始剩下。如图所示，顶部与顶部之间存在间隙。

我尝试了background-position属性的所有可能值。我还尝试了background-size属性的不同组合，但均未成功。谁能告诉我这是怎么回事，因为彩色背景可以正常工作，但图像背景却不能正常工作？

Answer 1

您的代码正确。它没有任何问题，所以...我只是可以猜到您的图像是这样的...具有透明的顶部边框。在任何图像编辑器中签出

html {
    font-size: 16px;
    height: 100%;
}

body {
    font-size: 1.2rem;
    line-height: 0.7rem;
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

/***** Header styles ******/
header {
    display: block;
    height: 30%;
    width: 100%;
    position: relative;
}

header .top-bar {
    z-index: 2;
}

header .prod-thumbnail {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:  url(https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
    background-size: cover;
    background-position: 0 0;
    z-index: 1;
}

<header>
        <div class="top-bar">
            <!-- Hamburger menu-->
            <div class="hamburger-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <!-- Logo-->
            <div class="logo"></div>
        </div>
        <div class="prod-thumbnail"></div>
    </header>

Answer 2

嗨，我在编码时曾遇到过这种情况很多次，当我打字时我发现它很容易而且有用

*{
 margin: 0px;
 padding: 0px;
 background-colour: grey; (you can choose which every colour you want and the * will apply that setting on the whole page)
}

这一小段简单的代码确保所有内容从哪里开始都没有问题。为确保不再发生此问题，请确保在css文件的开头键入上面的代码

背景图片不是从左上方开始

2 个答案: