background
1.设置背景平铺
background-repeat
round :图片会进行缩放后平铺
space : 图片会进行平铺,中间留下空白空间
注:当滚动行为设为fixed,round和space没有效果
2.设置滚动时的行为
background-attachment
scroll:父元素滚动时,跟随滚动;子元素滚动时,不跟随滚动。背景图片跟随父元素滚动
local:父元素滚动时,跟随滚动;子元素滚动时,跟随滚动。背景图片一直跟随滚动
fixed:父元素滚动时,不跟随滚动;子元素滚动时,不跟随滚动。背景图片固定不变
3.设置图片尺寸
background-size:宽度,高度
值/auto
如果设置成百分比的话,就是参照父容器的宽度和高度来
contains :会按比例变换大小,使图片全部在容器内,同时自适应容器大小
如果图片大于容器,会造成空白
如果图片小于容器 会放大图片
cover 背景图片会按比列缩放或扩大,会使图片充满容器
如对本文有疑问, 点击进行留言回复!!
深入理解CSS background-blend-mode的作用机制
网友评论