背景图像中包含的文本滚动

Question

我有 2 个背景图像要滚动，我希望文本在滚动时保持在背景图像中。现在，文本只是在滚动时放在图像的顶部，而且不是很清晰。我已经研究了几个小时，似乎无法正确。我以前在网上看到过数百次，但是当我自己做的时候，我似乎找不到任何例子，或者关于它是如何完成的教程！

当我滚动时，背景图像也不会留在原位。有没有办法让页面停止滚动，直到图像和文本都完全滚动？

这是一个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>

Answer 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>