html+css制作一个具有视差效果的主页

最新推荐文章于 2023-09-13 13:46:44 发布

咕咕林

最新推荐文章于 2023-09-13 13:46:44 发布

阅读量369

点赞数

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/l1021351889/article/details/104516116

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html+css制作一个具有视差效果的主页

这篇文章是根据我在b站上跟着一个大佬做的视频做了一个具有视差效果的页面之后的记录。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/style.css">
  <title>Document</title>
</head>
<body>
  <div class="pimg1">
    <div class="ptext">
      <span class="border">
        image 1
      </span>
    </div>
  </div>
  <!-- section标签是html5新增标签，是用来定义文档的某个区域
    （如：章节、页眉、页脚或者文档的其他区域）。 -->
  <section class="section section-Light">
    <h2>Hello</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
      Excepturi repellendus quasi autem, magnam aperiam reiciendis sequi
       omnis incidunt explicabo. Blanditiis quis, reprehenderit itaque rerum
        temporibus omnis fuga necessitatibus atque, dolore maxime impedit quae
         deserunt provident ipsum enim. Nam asperiores earum praesentium pariatur
          amet possimus quasi et quibusdam facere beatae quaerat voluptatibus non, 
          inventore doloribus autem odio impedit cumque doloremque expedita modi
           quas aliquam necessitatibus architecto? Eveniet nobis excepturi dolorum
            qui animi dicta neque magni, ipsam veritatis et sunt a necessitati
            bus!</p>
  </section>
  <div class="pimg2">
    <div class="ptext">
      <!-- <span> 标签被用来组合文档中的行内元素 -->
      <span class="border">
        image 2
      </span>
    </div>
  </div>
  <section class="section section-dark">
    <h2>World</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
      Excepturi repellendus quasi autem, magnam aperiam reiciendis sequi
       omnis incidunt explicabo. Blanditiis quis, reprehenderit itaque rerum
        temporibus omnis fuga necessitatibus atque, dolore maxime impedit quae
         deserunt </p>
  </section>
  <div class="pimg3">
    <div class="ptext">
      <span class="border">
        image 3
      </span>
    </div>
  </div>
  <section class="section section-Light">
    <h2>javaScript</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
      Excepturi repellendus quasi autem, magnam aperiam reiciendis sequi
       omnis incidunt explicabo. Blanditiis quis, reprehenderit itaque rerum
        temporibus omnis fuga necessitatibus atque, dolore maxime impedit quae
         deserunt </p>
  </section>
  <div class="pimg4">
    <div class="ptext">
      <span class="border">
        image 4
      </span>
    </div>
  </div>
</html>

css

body,html{
  height: 100%;
  margin: 0;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  /* 行高 */
  line-height: 1.8em;
  color: #666;
}
.pimg1,.pimg2,.pimg3,.pimg4{
  position: relative;
  /* opacity 不透明度 */
  opacity: 0.7;
  /* 图片定位  居中*/
  background-position: center;
  /* 图片尺寸 全覆盖 */
  background-size: cover;
  /* 设置图片为不重复 */
  background-repeat: no-repeat;
  /* 视差效果显示，将图片固定 */
  background-attachment: fixed;
}
.pimg1{
  background-image: url('../images/yh.jpg');
  min-height: 100%;
}

.pimg2{
  background-image: url('../images/city1.jpg');
  min-height: 400px;
}

.pimg3{
  background-image: url('../images/city2.jpg');
  min-height: 400px;
}

.pimg4{
  background-image: url('../images/city3.jpg');
  min-height: 100%;
}

.section{
  text-align: center;
  padding: 50px 80px;
}

.section-Light{
  background: #f4f4f4;
  color: #666;
}

.section-dark{
  background: #282e34;
  color: #ddd;
}

.ptext{
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 27px;
  /* 字间距 */
  letter-spacing: 8px;
  /* 将字母全部变为大写 */
  text-transform: uppercase;
}

.pimg1 .ptext span{
  background-color: #111;
  color: #fff;
  padding: 20px;
}

.pimg4 .ptext span{
  background-color: #111;
  color: #fff;
  padding: 20px;
}
/* 响应式取消视差效果 当页面宽度小于500px的时候，取消图片的固定*/
@media(max-width: 500px){
  .pimg1,.pimg2,.pimg3,.pimg4{
    background-attachment: scroll;
  }
}

咕咕林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css制作一个具有视差效果的主页

html+css制作一个具有视差效果的主页这篇文章是根据我在b站上跟着一个大佬做的视频做了一个具有视差效果的页面之后的记录。html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
复制链接

扫一扫