如何调整背景图像以适合 web 页面？

Question

我对 HTML/CSS 比较陌生，但我想尝试创建一个登录页面来熟悉代码。 下面我尝试创建一个响应式的主图，让我可以看到它上面的内容。 我的最终目标是中心的一个盒子，要求输入 email 和密码。

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

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 个小时的教程和文档，但仍然感到困惑。

Answer 1

在.hero-image class 中使用内联样式。您应该尽可能避免在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));
}

Answer 2

我不确定你想要做的是实现整页背景图像，还是只是某些元素（如标题）的背景图像。 如果它是一个完整的页面，那么你会想要使用background-size: cover ，当然还有 url ，在 html 或 body 元素上：

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;
}

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