[初学代码]使用css背景属性达成视觉差效果

如今大部分的网站已经不再是纯粹满足于简单地罗列布局，越来越多的网站开始要求能够达到视觉上让用户感觉到新奇的页面设计，这边是我们常说的视觉差效果。本博客主要分享的是滚动视觉差的基础编写，博主小白一名，有问题欢迎大家指出，互相交流学习。peace and love！

---

实现效果

 

---

 所需代码

完整代码编写在文章末尾有截图

• *{margin:0;padding:0;}

通配符*、margin：外间距、padding、内间距 ；用于清除所有标签自带边距的样式

• background-color:rgba(255, 255, 255, 0.8);

用于设定背景颜色，rgba分别为r红色、g绿色、b蓝色、a透明度

• background-position:center center;

用于给背景图片定位、属性值的顺序为水平位置 垂直位置、center居中

• background-repeat:no-repeat;

用于解决背景图片的平铺问题，加入背景图片之后，默认情况会将背景图片进行平铺的操作，为取消平铺效果，需使用该标签并加上no-repeat的属性值

• background-image:url(图片路径);

用于添加背景图片，url()里添加图片路径

• background-attachment:fixed;

本次代码编写最重要的语句，用来使背景图片固定，该标签拥有两个属性值（scroll/fixed）。

scroll：滚动效果，背景图片跟随浏览器进度条的滑动而移动，属于默认效果，实际运用中可以不去设置

fixed：固定效果，背景图片不跟随浏览器进度条的滑动而移动，图片固定在浏览器窗口，此时背景图片位置设定（background-position）的参照物为浏览器窗口

奇怪的误区（博主曾遇到的）：在图片外存在父元素盒子的时候，图片属于父元素盒子里，使用fixed属性时图片虽然固定在浏览器上，但其的显示范围仍然是在父元素盒子里，这意味着当图片固定的位子超出或随着浏览器进度条的滑动离开了父元素的盒子的时候，在视觉上图片将无法在浏览器上显示出来（这并不是代码错误，只需将图片位置调进父元素盒子里即可）。这也是最终能够实现视觉差效果的重要原因。

• margin-top:300px;

用于设置顶部的外间距

• overflow: hidden;

溢出隐藏，一般跟随margin-top的使用，在默认情况下，给子元素添加了margin-top，往往会导致父元素一起下来，这是时要使用overflow: hidden;解决margin的传递问题，让父元素摆脱影响，从而不影响布局

• line-height:200px;

行高，实际运用中常用来调节垂直居中，line-heigh=height可以使文本垂直居中

• text-align:center;

用于调节文本水平居中，还可以调节文本左对齐（left）、右对齐（right）。多行文本两端对齐可使用属性值justify，单行文本两端对齐可使用text-align-last:justify;

• font-weight:bolder;

用于加粗文字，属性值使用bold/bolder加粗效果一致，normal为常规，属性值为数字时，1-300为更细、400-500为常规、600-900为加粗，该属性没有单位

• font-size:24px;

用于调节文字大小

• width:100%;

用于调节宽度，使宽度占满全屏

---

编写步骤（软件为Visual Studio Code)

• 新建后缀为.html的文件，键盘英文模式下“!+Enter”

  

•  在body标签里建三个并列的div标签，并分别在div标签中建div标签，将所有标签用class选择器命名（不一样的办法：可以在div标签里使用span标签，但需要注意span标签为文本标签，无法修改宽高。我们可以选择用display:block;将span标签变成块区域，或者将宽高的属性放到span的父元素中去。）​​​​​​

• 在头部区域加入style标签，使用通配符清除标签自带的内外间距

•  为box1、box2、box3设置高度，添加背景图片，调节背景图片位置等

•  设置text1、text2、text3的文本样式以及背景颜色

---

这就是滚动视觉差的具体代码了，希望能让大家有在本博中了解到一些东西，有更好的解决办法欢迎评论讨论，博主也在学习中，我们下一个有意思的案例再见。