【css】固定图片背景制作出高级效果

KatyLight

已于 2022-10-25 15:45:11 修改

阅读量265

点赞数

分类专栏：样式游戏静态页demo 文章标签： css html 前端

于 2022-10-25 15:29:15 首次发布

本文链接：https://blog.csdn.net/qq_33014695/article/details/127514344

版权

样式同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

静态页demo

16 篇文章 0 订阅

订阅专栏

游戏

12 篇文章 0 订阅

订阅专栏

我在某些网站上看到了一种高级效果，就是文字内容会随着滚动小时，但是图片更具屏幕确实不变的，这确实是一个很高级的效果。

关键代码：

    <div class="card full">
      <div class="card-cover-box">
        <div>
          <div class="card-cover-image" style="background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.ZNqmK6S5PUF5OxYm48wREAHaEL?w=309&h=180&c=7&r=0&o=5&pid=1.7');
background-size:cover;
 background-position: center;
background-attachment: fixed;"></div>
        </div>
        <div class="image-full-ab  grid-item-center">
          <div style="margin: auto;color: white;font-size: 36px;font-weight: bolder">从你的上一步开始：</div>
        </div>
      </div>
    </div>

上述的某些class不用管，核心的内容也就是stlye里面的内容。

主要是：

style="background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.ZNqmK6S5PUF5OxYm48wREAHaEL?w=309&h=180&c=7&r=0&o=5&pid=1.7');
background-size:cover;
background-position: center;
background-attachment: fixed;"

【BUG】：其实这里还是有不足的地方，就是如果方块初始值不是设置100% 100%或者类似的值，就会导致图片一开始没有滚动的时候是小100% 100%的而不是图片显示div遮罩大图片的效果。根据开发环境调整，如果只考虑兼容手机端，直接写上 100vw 100vh即可。如果是伪手机端端需要去掉其他多余嵌套div，直接一层（height:100%:width100%;）