首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么我的背景图像没有纵向扩展

为什么我的背景图像没有纵向扩展
EN

Stack Overflow用户
提问于 2018-10-12 18:11:50
回答 2查看 275关注 0票数 0

因此,我已经看到了这个问题的答案,但它们似乎不适用于我的网站。

为什么我的背景图像不覆盖整个div?当我缩小屏幕宽度时,元素变得越来越长,但是部分背景保持不变。

为即将出现的大量代码表示歉意,但我认为最好将整个画面显示出来。

提前感谢您的帮助。

html

代码语言:javascript
运行
复制
<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

代码语言:javascript
运行
复制
.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;
}

这方面非常新,所以提前感谢:)

这是图像

EN

Stack Overflow用户

回答已采纳

发布于 2018-10-12 19:23:42

我复制并粘贴了你的代码来测试它。使用您给出的代码,您的图像覆盖了整个<div>,在<div>之间没有难看的空白。

当我进入我使用的火狐浏览器的响应设计模式时(右击屏幕->检查元素->转到弹出窗口的右上方按钮,或窗口上的ctrl+shift+M ).当我将高度设置为800 it宽为450 it高时,你做的越宽,图像就开始按你想要的方向展开长度。

之所以出现这种情况,是因为您有background-size: cover;,,它调整背景图像的大小,以覆盖整个容器,,即使它必须拉伸图像或剪掉边缘之一。

我有一个1920x1080PX屏幕,同样的原则也发生在响应式设计模式之外,尽管高度在我的屏幕最大宽度之前不久就扩展了。除了这个小窗口的扩展,图像一直保持不变的大小,直到我的浏览器窗口变得尽可能瘦,这是大约250 of,再次,因为background-size: cover;。很多图像也被剪掉了。您可以阅读有关该属性这里。的更多信息。

与我前面说的不同,如果您的图像没有像我说的那样在高度上扩展,那么您的问题很可能来自其他继承的css类,您需要展示这些类来帮助调试它。因此,请检查<section>标记所在的任何包含元素中的css类。

另一个提示:你在这里只给了一个图像,但是你的话听起来好像你有很多。因为您的.about类是position: fixed;,所以只有该图像才会出现。如果您希望其他图像以相同的固定位置显示在它们自己的<div>中,则需要复制/粘贴原始类,但稍微更改名称和图像路径到新图像。

票数 1
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52785009

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档