背景图像中包含文本滚动?
Text scrolling contained within background image?
我有 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>
只需在 css 中使用 background-size: cover
。
(我设置了自己的背景图片,因为你没有在你的 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>
我有 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>
只需在 css 中使用 background-size: cover
。
(我设置了自己的背景图片,因为你没有在你的 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>