[关闭]
@Wangww0925 2019-01-18T08:03:44.000000Z 字数 672 阅读 253

固定背景图片

css

效果

查看效果

思路

默认div是白色
div1设置背景色，让其固定在底部
div_opacity设置透明色
当div_opacity滚动到背景图上时就会显示图片

代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         div{
  12.             width:100%;
  13.             height:400px;
  14.             background-color:white;
  15.         }
  16.         .div1{
  17.             width:100%;
  18.             height:500px;
  19.             overflow: hidden;
  20.             background:url(http://static.zybuluo.com/Wangww0925/hpp3k8ksjnkqppuw46uksplx/1.jpg) no-repeat left top;
  21.             background-size:cover;
  22.             position:fixed;
  23.             left:0px;
  24.             top:0px;
  25.             z-index: -1;
  26.         }
  27.         .div_opacity{
  28.             width:100%;
  29.             height:400px;
  30.             background-color:transparent;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <!-- 固定背景色 -->
  36.     <div class="div1"></div>
  38.     <div></div>
  39.     <div class="div_opacity"></div> <!-- 设置透明度 -->
  40.     <div></div>
  41. </body>
  42. </html>

作者 wendy
2019 年 1月 17日

参考文献

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注