学习笔记——利用背景图实现视觉差

红太狼 2022-10-23 01:58 146阅读 0赞

**利用背景图，结合滚动条可以实现一些炫酷的页面，其本质是利用滚动条加上背景图，在页面滚动时页面背景之间实现了视觉差。主要使用了background-attachment这一属性。**

### 1.代码： ###

<div class="box box1"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
            <div class="box box4"></div>

* { padding: 0; margin: 0; }
                .box { 
                    width: 100%;
                    height: 600px;
                    background-attachment: fixed;
                }
                .box1 {
                    background-image: url(images/001.jpg);
                }
                .box2 {
                    background-image: url(images/002.jpg);
                    
                }
                .box3 {
                    background-image: url(images/003.jpg);
                }
                .box4 {
                    background-image: url(images/004.jpg);
                }

### 2.效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221022/8302ac95afc8432fbb577a480ea26adf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery实现轮播图（利用更改背景图片的方法）

自己在写轮播图过程中，花费了一些时间，因为是刚开始接触，所以可能不是特别精简. 但是测试和运行都是没有问题的，自己对这个了解之后，觉得这种方法局限性比较大，在其他...

傷城~/ 2024年04月18日 12:44/ 0 赞/ 52 阅读

相关利用mask图（二值图）和原图实现扣除前景/背景

利用mask图（二值图）和原图实现扣除前景/背景 test.py import cv2 from PIL import Image import

爱被打了一巴掌/ 2023年02月17日 03:16/ 0 赞/ 18 阅读

相关机器人视觉手眼标定学习笔记

常用术语：位姿：位置与姿态，为了描述空间物体的位置与姿态，我们一般先在物体上设置一个坐标系（位姿）。工具坐标系：我们通常采用设置于机器末端执行器上的工具坐标系（相对

末蓝、/ 2022年11月03日 11:18/ 0 赞/ 227 阅读

相关学习笔记——利用边框实现三角形

使用CSS+HTML实现三角形，其中三角形的实现原理利用了边框中的属性。 1. 代码 .box { width: 0p

╰+攻爆jí腚メ/ 2022年10月23日 03:00/ 0 赞/ 121 阅读

相关学习笔记——利用背景图实现视觉差

利用背景图，结合滚动条可以实现一些炫酷的页面，其本质是利用滚动条加上背景图，在页面滚动时页面背景之间实现了视觉差。主要使用了background-attachment这一属性。

红太狼/ 2022年10月23日 01:58/ 0 赞/ 147 阅读

相关 jQuery和CSS3网页固定背景视觉差特效插件

这是一款非常实用的jQuery和[CSS3][]网页固定背景视觉差特效插件。该固定背景特效可以在页面中固定某些元素，在页面滚动的时候可以修改这些元素的视觉效果，从而制作出一种滚

柔光的暖阳◎/ 2022年08月05日 13:10/ 0 赞/ 215 阅读

相关 PS学习笔记----------利用图层蒙版来实现无损抠图

利用图层蒙版来实现无损抠图：用图层蒙版来实现的抠图就是无损抠图。：：：在带有选区的情况下，添加蒙版时，选区内会涂抹白色即可以显示，选区外涂抹黑色即

墨蓝/ 2022年08月04日 12:38/ 0 赞/ 267 阅读

相关利用css选择器的优先级实现导航栏背景图的切换.

效果如图:![Center][] ![Center 1][] html 代码: <div class="banner\_area"> <

深碍√TFBOYSˉ_/ 2022年07月15日 15:22/ 0 赞/ 80 阅读

相关 CSS实现背景图片固定滚动形成视觉差效果

最近在写项目的时候遇到一个页面效果：背景图片固定，但是当我们滚动滚动条的时候感觉背景图片也随着滚动条上下滚动，查阅了相关资料，做记录如下：只要固定的元素的背景backgr

矫情吗；*/ 2022年06月16日 02:36/ 0 赞/ 324 阅读

相关机器视觉-halcon学习笔记6

滤波算子：均值滤波：单个像素点周围像素的均值来代替这个点并形成一个新图像； ![1579956-20190317224610646-946646194.png

比眉伴天荒/ 2021年12月20日 13:51/ 0 赞/ 337 阅读