2

我有 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>

4

1 回答 1

1

只需background-size: cover在您的CSS中使用。

小提琴

（我设置了自己的背景图片，因为您没有在小提琴中提供任何背景图片）：

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

于 2016-03-05T16:09:10.060 回答