因此,我已经看到了这个问题的答案,但它们似乎不适用于我的网站。
为什么我的背景图像不覆盖整个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;
}这方面非常新,所以提前感谢:)
这是图像

发布于 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>中,则需要复制/粘贴原始类,但稍微更改名称和图像路径到新图像。
https://stackoverflow.com/questions/52785009
复制相似问题