css 利用 background-attachment: fixed 实现视觉差效果

最新推荐文章于 2022-08-19 16:50:09 发布

JoyWang1024

最新推荐文章于 2022-08-19 16:50:09 发布

阅读量263

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_28084837/article/details/120082549

版权

效果如图所示：

css代码：

div {
      display: block;
      cursor: pointer;
      width: 100%;
      height: 100vh;
      margin-bottom: 20px;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed;
      color: #fff;
      text-shadow: 2px 2px #666;
    }

    .section1 {
      background-image: url(https://img0.baidu.com/it/u=2021795008,2017612367&fm=26&fmt=auto&gp=0.jpg);
      background-color: #fd7400;
    }

    .section2 {
      background-image: url(https://img2.baidu.com/it/u=1129693069,995917531&fm=26&fmt=auto&gp=0.jpg);
      background-color: #ffe11a;
    }

    .section3 {
      background-image: url(https://img0.baidu.com/it/u=3014974138,3272327208&fm=26&fmt=auto&gp=0.jpg);
      background-color: #bedb39;
    }

    .section4 {
      background-image: url(https://img1.baidu.com/it/u=327506210,840215627&fm=26&fmt=auto&gp=0.jpg);
      background-color: #1f8a70;
      /* 不固定背景图 */
      background-attachment:scroll !important; 
    }

    .section5 {
      background-image: url(https://img1.baidu.com/it/u=2446224251,2010104907&fm=26&fmt=auto&gp=0.jpg);
      background-color: #004358;
    }

html代码：

  <div class="section1">图片来源于百度</div>
  <div class="section2">图片来源于百度</div>
  <div class="section3">图片来源于百度</div>
  <div class="section4">图片来源于百度</div>
  <div class="section5">图片来源于百度</div>