hooyantsing's Blog

P52_2_背景重复与滚动技巧

字数统计: 132阅读时长: 1 min
2020/04/13

P52 2 背景重复与滚动技巧

background-repeat

space

e0f924261c75fd957c99fa15d8f0b39a.png

1
2
3
4
5
6
7
8
//默认背景重复
background-repeat: repeat;
//关闭重复
background-repeat: no-repeat;
//水平重复 | 垂直重复
background-repeat: repeat-x | repeat-y;
//平均分配
background-repeat: space;

background-attachment

父级加入滚动条overflow:auto后,子类背景过大。显示的时候可以拉动滚动条,背景图也在变化。

1
2
3
4
//默认,背景跟随滚动条一起滚动
background-attachment: scroll;
//如果不想要背景也跟着滚动,可以加入以下代码固定
background-attachment:fixed;
CATALOG