添加 CSS
- 将主体的高度设置为 100%，将边距设置为 0。
- 使用 font-family 属性指定字体系列名称。
- 使用 background-position 属性将图像居中。
- 将 background-repeat 属性设置为“no-repeat”，这样图像就不会重复。
- 将 background-size 设置为“cover”以尽可能大地缩放图像以覆盖所有背景区域。
- 使用 background-image 属性添加图像的链接。
- 为内容设置样式并为其设置边框并设置其宽度和高度。
- 将位置设置为“固定”，以便在滚动时固定。
- 使用颜色、字体粗细和字体大小属性设置文本样式。
- 使用 transform 属性的“translate”值，其中第一个值将元素向左移动（负值向左移动）。
第二个值将向上移动（负值向上）。
- 借助 text-align 属性将内容居中。
- 提供填充以在元素内容的所有侧面创建空间。
- 添加指定其在堆叠上下文中的顺序的 z-index。
- 使用 left 和 top 属性指定左边距和上边距边缘。
- 使用 background-color 属性为内容指定背景颜色。
我们使用RGB值。
body,
html {
height: 100%;
margin: 0;
font-family: Helvetica, sans-serif;
}
.image {
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.one {
background-image: url("car.png")
}
.content {
background-color: rgb(0, 0, 0, 0.5);
color: #fff0c2;
font-weight: bold;
font-size: 60px;
border: 8px solid #000000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 270px;
padding: 50px;
text-align: center;
}
在滚动时使用固定文本框更改背景图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body,
html {
height: 100%;
margin: 0;
font-family: Helvetica, sans-serif;
}
.image {
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.one {
background-image: url("sea.png")
}
.two {
background-image: url("notebook.png")
}
.three {
background-image: url("nature.png")
}
.four {
background-image: url("pencil.png")
}
.five {
background-image: url("sea2.png")
}
.six {
background-image: url("city.png")
}
.seven {
background-image: url("city2.png")
}
.content {
background-color: rgba(0, 0, 0, 0.5);
color: #fff0c2;
font-weight: bold;
font-size: 60px;
border: 8px solid #000000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 270px;
padding: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="image one"></div>
<div class="image two"></div>
<div class="image three"></div>
<div class="image four"></div>
<div class="image five"></div>
<div class="image six"></div>
<div class="image seven"></div>
<div class="content">onitroad</div>
</body>
</html>
在滚动时更改背景图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
font-family: Helvetica, sans-serif;
line-height: 1.5;
word-spacing: 2px;
letter-spacing: 0.5px;
}
.fixed {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
color: #eeeeee;
text-align: center;
display: table;
}
.fixed h2 {
display: table-cell;
vertical-align: middle;
}
.scroll {
background-color: #ffe0f6;
padding: 10px 70px;
color: #666666;
}
.one {
background-image: url("phone.png")
}
.two {
background-image: url("notebook.png")
}
.three {
background-image: url("nature.png")
}
</style>
</head>
<body>
<div class="wrapper">
<div class="fixed one"></div>
<div class="scroll">
<h3>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</h3>
</div>
<div class="fixed two"></div>
<div class="scroll">
<h3>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</h3>
</div>
<div class="fixed three"></div>
</div>
</body>
</html>
CSS 具有强大的功能，无需在代码中放入任何 JavaScript 即可创建奇妙的效果。
效果之一是在前景滚动时保持背景固定。
我们如何在滚动时更改背景图像？
这比你想象的要简单得多！
让我们创建一个代码并查看结果。
创建 HTML
- 使用以下类创建七个 <div> 标签：
<div class="image one"></div> <div class="image two"></div> <div class="image three"></div> <div class="image four"></div> <div class="image five"></div> <div class="image six"></div> <div class="image seven"></div> <div class="content">onitroad</div>
日期：2020-06-02 22:14:59 来源：oir作者：oir