文章目录
- 一、背景的相关属性?
- 二、雪碧图
- 三、渐变
一、背景的相关属性
有关background的相关属性
background-color 设置背景颜色
background-image url("图片的路径") 设置背景图片
可以同时设置图片的背景颜色和背景图片,这时背景颜色会自动成为图片的背景色,图片大于背景元素,将会有一部分无法完全显示,图片小于背景元素,则背景图片会自动在元素中平铺铺满
background-repeat 设置背景的重复方式
可选值 repeat 默认值,背景会沿着x轴,y轴双方向重复铺满
repeat-x 沿着x轴方向重复平铺
repeat-y 沿着y轴方向重复平铺
no-repeat 背景图片不重复
background-position 设置图片的位置 通过 top, left, right, bottom,center 几个方向表示图片的位置,使用方位时,同时要指定两个值,如果只写第一个,第二个就是 center 例如:使图片处于左上角 background-position: top left;通过偏移量 来指定背景图片的位置 水平方向的偏移量,垂直方向的偏移量background-position: 100px 100px;
background-clip 设置背景的范围
可选值
border-box 背景会出现在边框的下边
padding-box 默认值, 背景不会出现在边框,只出现内容区和内边距
content-box 背景只会出现在内容区
background-orign 背景图片的偏移量计算的原点
padding-box 默认值,background-position从内边距处开始计算
content-box 背景图片偏移量从内容区处计算
border-box 北京图片的变量从边框处开始计算
background-size 设置背景图片的大小
第一个值表示宽度,第二值表示高度
如果只写一个,则第二个值默认是 auto
cover 图片的比例不变,将元素铺满,呈现的图片可能会不完整
contain 图片的比例不变,将图片在元素在元素中完整显示
background-attachment 背景图片是否跟随元素移动
可选值
scroll 默认值,背景图片会跟随元素移动
fixed 背景会固定在页面中,不会随元素移动
背景的简写属性
background 所有背景的样式都可以通过该样式来设置,样式没有顺序要求,没有哪个属性是必须要写的,
注意: background-size必须写在background-position的后面,并且使用 / 隔开
background-position/background-size
background-orgin 在 background-clip 前面 因为它俩的属性值相同,为了区分,做出的规定
二、雪碧图(css-sprite)
解决图片闪烁的问题, 可以将多个小图统一保存到大图片中,然后通过调整 bakground-position 来显示图片, 这样图片会同时加载到网页中,就可以 有效地避免出现闪烁的问题 这种技术被称为 css-sprite,这种图片叫做雪碧图,降低请求的次数,加快访问速度,提升用户的体验