如何调整背景图像的大小以适合网页？答案

【问题标题】：How do I size a background image to fit the web page?如何调整背景图像的大小以适合网页？
【发布时间】：2020-08-21 22:21:06
【问题描述】：

我对 HTML/CSS 比较陌生，但我想尝试创建一个登录页面来熟悉代码。下面我尝试创建一个响应式的英雄图像，并允许我查看其顶部的内容。我的最终目标是中心的一个盒子，要求输入电子邮件和密码。

如何使背景图片的大小正确且不导致网站可滚动？也不太确定网格是否是导致问题的原因。

HTML：

<div class="hero-image">
    <div class="grid-container">
        <div id="top">1</div>
        <div id="lefts">2</div>
        <div id="insert">
            <form>
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Enter Email">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter Password">
            </form>
        </div>
        <div id="rights">4</div>
        <div id="bottom">5</div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}
body{
    height: 100%;
}


.hero-image {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),url("Background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 50%;
}

.grid-container:nth-child(odd){

}

.grid-container {
    display: grid;
    grid-auto-columns: minmax(150px, auto);
    grid-auto-rows: minmax(300px, auto);
    grid-gap: 5px;
    grid-row: auto;
    grid-column: auto;
}

#top {
    grid-column: span 3;
    grid-row: span .75;
    color: green;
}

#lefts {
    grid-column: span 1;
    grid-row: span 1;
}
#insert {
    height: 100%;
    width: 100%;
    grid-column: span 1;
    grid-row: span 1;
}

#rights {
    grid-column: span 1;
    grid-row: span 1;

}

#bottom {
    grid-column: span 3;
    grid-row: span 2;
}

#password {
    text-align: left
}

再次非常抱歉，因为这或多或少是最后的手段，我在过去 5 小时内尝试检查教程和文档仍然感到困惑。

【问题讨论】：

请将 CSS 和 HTML 合并在一起以便解析。你的CSS也被切断了。您从没有所属类或 ID 的 CSS 元素开始。
@tacoshy 通过解析你想让我把<style>标签放在HTML中吗？我已经链接了，只是没有输入代码。
没有。您目前对 HTML 代码使用 sn-p，另外对 CSS 代码使用 snipped。您可以将两者放在同一个 sn-p 中。有 3 个字段（HTML、CSS 和 JS）。如果您将 CSS 放入 CSS 字段并将 HTML 放入 HTML 字段，您可以按下“运行按钮”，它会解析代码并像在真实网站上一样显示。

标签： html css image css-grid

【解决方案1】：

在 .hero-image 类上使用内联样式。您应该尽可能避免在 css 中添加图像。对于渐变/叠加，最好使用伪元素。您必须添加 position: relative 和 z-index 才能形成，这样叠加层就不会出现在 div 的顶部

<div class="hero-image" style="background-image: url('Background.jpg);">
</div>

.hero-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 50%; 
  position: relative;
}
.hero-image::after{
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: linear-gradient(180deg, transparent, rgba(0,0,0,0.3), 
     rgba(0,0,0,0.6), rgba(0,0,0,0.8));
}

【讨论】：

css 代码的最后一行给我一个参数不匹配的错误。更具体地说是错误：[, ]+
线性渐变属性中缺少括号。尝试解决这类问题
这就是我最初认为的问题，但在我修复它之后它仍然显示为错误。截图：gyazo.com/b37a5ee5a291f9839d49affd43c99ef1
检查您的标记和 CSS。我添加了另一个线性渐变示例。
它现在正在接受该代码，但网站仍在滚动我尝试更改背景大小但没有成功。

【解决方案2】：

我不确定您要实现的是整页背景图片，还是只是某些元素（如标题）的背景图片。如果是整页，那么您将需要在 html 或 body 元素上使用background-size: cover，当然还有 url：

html { 
  background: url('https://picsum.photos/seed/picsum/200/300') no-repeat center center scroll; 
  background-size: cover;
}

在一个元素上，您还需要使用background-size: cover，但要添加一些控制大小：

section {
  background: url('https://picsum.photos/seed/picsum/200/300') no-repeat center center fixed; 
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
}

您可以根据自己的目的操纵高度值来调整其大小。

【讨论】：