人生得意须尽欢，莫使金樽空对月
期末如约而至，又到了为主题英语口语活动苦恼的一天，笔者的小组选择了介绍豫剧。
本着将花里胡哨进行到底的原则，我接下了PPT这个活，
PPT，为何不来个花里胡哨的网页。
先来看看效果
模糊背景：
主要思想：因为filter滤镜会对整个容器进行滤镜效果，因此如果文字和背景在一起也会模糊化，所以我们要把filter和背景图放置在另一个容器里，放伪类::before显然好一点。
放伪类里，伪类设置绝对定位，原元素设置相对定位，再把伪类的层级降低这样就不会挡住文字了。
视差滚动：
主要思想：设置background-attachment:fixed;意思是当这个容器在当前窗口时，就显示背景，但背景是相对窗口固定的，所以fixed的英文意思也是固定的。
下面关键代码做了标注：
div:nth-child(1)::before {
content: '';
background-image: url(https://s2.loli.net/2021/12/09/a3FrJbAUgxhL4eV.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
/* 关键代码*/
background-attachment: fixed;
z-index: -1;
/* 关键代码*/
filter: blur(5px);
width: 100vw;
height: 100vh;
/* 关键代码*/
position: absolute;
}
div:nth-child(1) {
/* 关键代码*/
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
width: 60%;
color: white;
font-weight: 700;
font-size: 25px;
letter-spacing: 0.1rem;
word-spacing: 0.2rem;
text-indent: 2rem;
}
/* 第一个*/
div:nth-child(1)::before {
content: '';
background-image: url(https://s2.loli.net/2021/12/09/a3FrJbAUgxhL4eV.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
z-index: -1;
filter: blur(5px);
width: 100vw;
height: 100vh;
position: absolute;
}
div:nth-child(1) {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-shadow: 0 1px 2px 2px white;
}
div:nth-child(2) {
width: 100vw;
height: 100vh;
background-image: url(https://s2.loli.net/2021/12/09/fW7BO9SQ6igzNLM.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
/* 第二个 */
div:nth-child(3)::before {
content: '';
background-image: url(https://s2.loli.net/2021/12/09/EfPADjndWK4ZCO2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
z-index: -1;
filter: blur(5px);
width: 100vw;
height: 100vh;
position: absolute;
}
div:nth-child(3) {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-shadow: 0 1px 2px 2px white;
}
div:nth-child(4) {
width: 100vw;
height: 100vh;
background-image: url(https://s2.loli.net/2021/12/09/mZ2DWlRiJ45C1EQ.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
/* 第三个 */
div:nth-child(5)::before {
content: '';
background-image: url(https://s2.loli.net/2021/12/09/195LidQGIhJeBDq.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
z-index: -1;
filter: blur(5px);
width: 100vw;
height: 100vh;
position: absolute;
}
div:nth-child(5) {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-shadow: 0 1px 2px 2px white;
}
div:nth-child(6) {
width: 100vw;
height: 100vh;
background-image: url(https://s2.loli.net/2021/12/09/PEF6sG3prwUBcV2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>Henan Opera originated in the Central Plains (Kaifeng, Henan Province). It is the largest local
opera in China and ranks first among all local operas in China. Henan Opera is continuously
inherited, reformed and innovated on the basis of Henan Wooden Clappers. Together with
Peking Opera, Huangmei Opera, Pingju opera and Yue Opera, it is one of the five major operas
in China, one of the Han operas and the first major local operas in China. Henan Opera has also
followed henan SATELLITE TV, Henan Yu Theatre, Taiwan Yu Opera troupe and other
performance groups through many countries in the world. Such as: Australia, Italy, France,
Canada and other countries. Praised by westerners as "Oriental aria", "Chinese opera" and so on.</p>
</div>
<div></div>
<div>
<p>
Henan opera is famous for its sonorous atmosphere, cadence, sound style, clear words, mellow
charm, lively, flesh and blood, and good at expressing the inner feelings of the characters. It is
widely welcomed by people from all walks of life with its high degree of artistry. Because of its
musical accompaniment of dates wooden Clappers, it was named Henan Wooden Clappers in its
early days.
According to the statistics of the Ministry of Culture, besides Henan province, there are
professional Henan troupes in Hubei, Anhui, Jiangsu, Shandong, Shaanxi, Shanxi, Hebei,
Qinghai, Xinjiang, Taiwan and other provinces and cities. It is one of the most influential
operas in China .
</p>
</div>
<div></div>
<div>
<p>In November 2019, the General Office of the Ministry of Culture and Tourism organized the
inspection and adjustment of representative national intangible Cultural Heritage protection
units, henan Opera protection unit is the Intangible Cultural Heritage Protection Center of Henan
Province. In 2006, Henan opera was listed in the first batch of national intangible cultural
heritage list by The State Council. And was directly managed and incorporated by the Ministry
of Culture
On May 24, 2021, Henan Opera declared by Xinjiang Production and Construction Corps
was approved by The State Council to be included in the national Intangible Cultural Heritage
Representative project list expanded project list.</p>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
