前端学习DAY8——背景颜色

前端学习DAY8——背景颜色

背景
前端学习DAY8——背景颜色
repeat :  背景图像在纵向和横向上平铺(默认的)

no-repeat :  背景图像不平铺

repeat-x :  背景图像在横向上平铺

repeat-y :  背景图像在纵向平铺
前端学习DAY8——背景颜色
如果background-position用精确坐标,background-position:x坐标,y坐标。或者x坐标,center。
背景固定:background-attachment : scroll | fixed

背景简写:background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
前端学习DAY8——背景颜色
背景半透明:

background: rgba(0,0,0,0.3);

背景缩放:
a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)

b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。

c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
前端学习DAY8——背景颜色
多背景图片:
以逗号分隔可以设置多背景,可用于自适应布局

background-image: url('images/gyt.jpg'),url('images/robot.png');

前端学习DAY8——背景颜色
凹凸文字:
前端学习DAY8——背景颜色
废话:有点开始怀疑自己了

上一篇:2019正睿CSP-S模拟赛十连测day8


下一篇:秋招C++开发学习之路day8