html - 为什么我的背景图片没有纵向扩展

Question

所以我看到了这个问题的答案，但它们似乎在我的网站上不起作用。

为什么我的背景图片没有覆盖整个 div？当我减小屏幕宽度时，元素会变长，但部分背景保持不变。

很抱歉出现了很多代码，但我认为最好展示全貌。

在此先感谢您的帮助。

html

<section class="about">
        <div class="row">
            <h2 id="trabajo">Cómo trabajo</h2>
            <p id="about-subheading">Déjame adivinar cómo quieres tu trabajo…</p>
        </div>

        <div class="about-container">
            <div class="col a"></div>
            <div class="col b">
                <i class="fas fa-plane"></i>
                <h3 class="about-h3">¿Lo quieres rápido?</h3>
                <p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
                grabación de tu proyecto.</p>
            </div>
            <div class="col c">
                <i class="fas fa-trophy"></i>
                <h3 class="about-h3">¿Quieres profesionalidad?</h3>
                <p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
                notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
            </div>
            <div class="col d">
                <i class="fas fa-dollar-sign"></i>
                <h3 class="about-h3">¿Quieres un precio justo?</h3>
                <p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
                adaptado para ti!</p>
            </div>
            <div class="col e"></div>
        </div>

        <div class=row>
            <p class="your-voice">¡Entonces soy tu voz!</p>
            <div class="btn-container">
                <a href="#" class="quote">¡Pide tu presupuesto!</a>
            </div>
        </div>

    </section>

CSS

.about {
    height: 100vh;
    background-image: linear-gradient(rgba(237, 99, 117, 0.9), rgba(237, 99, 117, 0.9)), url(Images/thumbnail_section\ COMO\ TRABAJO.jpg); 
    background-size: cover; 
    background-attachment: fixed;
    background-position: center;
}

.about:after {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 100%;
    left: 50%;
    margin-left: -35px;
    content: '';
    transform: rotate(45deg);
    margin-top: -35px;
    background-color: #D65A6A;

}

#trabajo {
    color: white;
    text-align: center;
    font-weight: 400;
    font-size: 150%;
    position: relative;
    margin-top: 10px;
    letter-spacing: 1px;
}

#about-subheading {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

.about-container {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 1fr 120px;
}

.col {
    text-align: center; 
    margin-top: 20px; 
    padding: 20px;
}


.fas {
    font-size: 200%;
    color: white;
}

.fa-plane {
    transform: rotate(320deg);
}


.about-h3 {
    margin-top: 30px;
    font-size: 100%;
    font-weight: 400;
}

.about-p {
    margin-top: 20px;
    font-size: 80%;
    line-height: 23px;
    font-weight: 100;
}

对此很陌生，所以在此先感谢:)

这是图片

Answer 1

我复制并粘贴了您的代码来测试它。使用您提供的代码，您的图像覆盖了整个 <div> , <div> 之间没有尴尬的空格.

当我进入 firefox 浏览器的响应式设计模式时，我正在使用 (右键单击屏幕 -> 检查元素 -> 转到弹出窗口的右上角按钮，或 ctrl+shift+ M on windows)...当我将高度设置为 800px 宽 x 450px 高时，你做得越宽，图像就会开始按你想要的长度方向扩展。

这是因为你有 background-size: cover; ，它会调整背景图像的大小以覆盖整个容器，即使它必须拉伸(stretch)图像或从边缘切掉一点。

我有一个 1920x1080 像素的屏幕，同样的原理也发生在响应式设计模式之外，尽管高度在我的屏幕最大宽度之前不久扩展。除了那个小的扩展窗口之外，图像一直保持相同的大小，直到我的浏览器窗口变得尽可能窄，大约 250px，这也是因为 background-size: cover;。 .很多图像也被切断了。您可以阅读有关该属性的更多信息 here.

除了我上面说的，如果你的图片没有像我说的那样扩展高度，那么你的问题很可能来自其他一些继承的 css 类，你需要显示它来帮助调试它。 因此，请检查您的 <section> 包含的所有元素中的 css 类标签在。

另一个提示:您在这里只提供了一张图片，但您的话听起来好像有很多张图片。因为你的.about类是 position: fixed; ，那么只会显示该图像。如果您希望任何其他图像显示在它们自己的 <div> 中具有相同的固定定位，您需要复制/粘贴原始类，但稍微更改名称，并将图像路径更改为新图像。