html - 背景图像中包含文本滚动？

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。

fiddle

(我设置了自己的背景图片，因为你没有在你的 fiddle 中提供任何图片):

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