我想要滚动2个背景图像，我希望文本在滚动时保留在背景图像中。 现在，文本在滚动时只是放在图像的顶部，并且它不是很清晰。我已经研究了几个小时，似乎无法做到正确。 我之前已经在网上看过几百次，但是当我为自己制作它时，我似乎无法找到任何示例或教程如何完成！
滚动时，背景图像也不会留在原位。有没有办法让页面停止滚动，直到图像和文本都完全滚动过来？
Heres a jsfiddle：https://jsfiddle.net/wf0vyj9w/（很难让它上班......）
继承人github：https://github.com/Darkstar93/Resume
下面是代码：
.sprintxp {
background-image: url("../images/cell.jpeg");
background-image: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
color: yellow;
text-shadow: 2px 1px 1px #4d4d4d;
padding: 40px;
max-width: 100%;
}
.mensxp {
background-image: url("../images/suits.jpeg");
background-image: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
color: white;
padding: 40px;
text-shadow: 2px 1px 1px #4d4d4d;
}
#sprintlogo {
width: 30%;
height: 100%;
}
#menslogo {
width: 20%;
height: 100%;
}
/* Education */
#uvulogo {
width: 30%;
}
#thinklogo {
width: 30%;
}<div class="xp">
<h1 id="work">Work Experience</h1>
<div class="sprintxp">
<img src="images/sprint.png" id="sprintlogo" alt="sprintlogo">
<p>Technical Consultant</p>
<ul>
<li>Performed software and hardware repairs on devices which reduced phone replacements.</li>
<li>Conducted inventory checks which resulted in lowering the accessory, and device, discrepancies.</li>
<li>Maintained near-perfect customer satisfaction scores for entirety of employment.</li>
<li>Established a base of loyal customer clientele allowing me to consistently surpass quotas.</li>
<li>Utilized in store sales systems such as SalesForce to close transactions and create opportunities.</li>
<li>Adapted quickly to new technological innovations within the cell phone industry and memorized
new company promotional plans on a monthly basis, resulting in less churn rate and high customer satisfaction.</li>
</ul>
</div>
<div class="mensxp">
<img src="images/mens.png" id="menslogo" alt="menswarehouselogo">
<p>Sales Associate</p>
<ul>
<li>Improved store displays by implementing my personal designs and creativity.</li>
<li>Provided all customers with outstanding customer service.</li>
<li>Product knowledge leader for all new merchandise and trends in men’s fashion.</li>
<li>Highest sales per quarter.</li>
<li>Responsible for training of new hires to be effective sales representatives.</li>
</ul>
</div>
答案 0 :(得分：1)
只需在你的CSS中使用background-size: cover。
（我设置了自己的背景图片，因为你没有提供任何小提琴）：
.sprintxp {
background-image: url("https://www.planwallpaper.com/static/images/violet-vector-leaves-circles-backgrounds-for-powerpoint_PdfkI4q.jpg");
background-image: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: yellow;
text-shadow: 2px 1px 1px #4d4d4d;
padding: 40px;
max-width: 100%;
}
.mensxp {
background-image: url("http://www.designshock.com/wp-content/uploads/2015/02/prisma.jpg");
background-image: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
padding: 40px;
text-shadow: 2px 1px 1px #4d4d4d;
}
#sprintlogo {
width: 30%;
height: 100%;
}
#menslogo {
width: 20%;
height: 100%;
}<div class="container">
<div class="top">
</div>
<div class="cover">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet sagittis quam, eu consequat ligula porta ut. Nam maximus fringilla tincidunt. Proin at quam sollicitudin felis tincidunt eleifend. Nulla rhoncus erat vitae dui fermentum, in venenatis
metus tincidun</p>
</div>
<div class="xp">
<h1 id="work">Work Experience</h1>
<div class="sprintxp">
<img src="images/sprint.png" id="sprintlogo" alt="sprintlogo">
<p>Technical Consultant</p>
<ul>
<li>Performed software and hardware repairs on devices which reduced phone replacements.</li>
<li>Conducted inventory checks which resulted in lowering the accessory, and device, discrepancies.</li>
<li>Maintained near-perfect customer satisfaction scores for entirety of employment.</li>
<li>Established a base of loyal customer clientele allowing me to consistently surpass quotas.</li>
<li>Utilized in store sales systems such as SalesForce to close transactions and create opportunities.</li>
<li>Adapted quickly to new technological innovations within the cell phone industry and memorized new company promotional plans on a monthly basis, resulting in less churn rate and high customer satisfaction.</li>
</ul>
</div>
<div class="mensxp">
<img src="images/mens.png" id="menslogo" alt="menswarehouselogo">
<p>Sales Associate</p>
<ul>
<li>Improved store displays by implementing my personal designs and creativity.</li>
<li>Provided all customers with outstanding customer service.</li>
<li>Product knowledge leader for all new merchandise and trends in men’s fashion.</li>
<li>Highest sales per quarter.</li>
<li>Responsible for training of new hires to be effective sales representatives.</li>
</ul>
</div>