背景图定位
-
backbround-position:(属性值)
-
定义:规定插入背景图在盒子中的位置,默认为从左上角开始显示。
-
定位方法:
1、像素:backbround-position:(水平偏移,垂直偏移)
X轴 正值向右偏移,负值向左偏移
Y轴 正值向下偏移,负值向上偏移
2、百分比:
图片在盒子的左上角 backbround-position:(0%,0%)
在右下角backbround-position:(100%, 100%) -
百分比代表的像素值:(盒子的宽/高 — 图片本身的宽/高)%
如果只有一个值,默认另一个值为50% 值也可以是负数。
3、单词表现方式:
top 顶部
bottom 底部
center 中间
left 左边
right 右边
应用场景:
1、网页背景
2、广告通栏
3、精灵图 (永它可以提高网页的反应速度,减少服务器压力)
滚动
- backbround-attachment
- 定义:设置图片是否随着页面的滚动儿滚动。
- 属性值:
- fixed 背景图会被固定,不会随着网页滚动而滚动。
- scroll 设置背景图像会随视窗滚动条的移动而移动
css3的背景
- 背景原点:backbround-origin:
- padding-box 从内边距开始显示背景
- border-box 从边框开始显示背景
- content-box 从内容开始显示背景
背景裁切
- background-clip
- padding-box 超出内边距的背景图被裁切掉
- border-box 超出边框的背景图被裁掉
- content-box 超出内容部分的背景图被裁切掉
CSS3的颜色
- 用rgba来表示: a代表的是透明度