7--CSS--2.3、行高(line-height)& 背景(background)
目录
行高(line-height)
行高测量
单行文本垂直居中
行高 = 上距离 + 内容高度 + 下距离
行高和高度的三种关系
-
如果 行高 等 高度 文字会 垂直居中
-
如果行高 大于 高度 文字会 偏下
-
如果行高小于高度 文字会 偏上
CSS 背景(background)
css背景图片和插入图片的区别
1、背景颜色(color)
background-color:颜色值; 默认的值是 transparent 透明的
2、背景图片(image)
background-image : none | url (url)
我们提倡 背景图片后面的地址,url不要加引号。
3、背景平铺(repeat)
background-repeat : repeat | no-repeat | repeat-x | repeat-y
4、背景位置(position) 重点
background-position : length || length
background-position : position || position
参数 | 值 |
---|---|
length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
position | top | center | bottom | left | center | right 方位名词 |
实际工作用的最多的,就是背景图片居中对齐了。
5、背景附着
背景附着就是解释背景是滚动的还是固定的
background-attachment : scroll | fixed
参数 | 作用 |
---|---|
scroll | 背景图像是随对象内容滚动 |
fixed | 背景图像固定 |
6、背景简写
background: transparent url(image.jpg) repeat-y scroll center top ;
背景透明(CSS3)(IE9及以上)
background: rgba(0, 0, 0, 0.3);
背景总结
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景位置 | length/position 分别是x 和 y坐标, 切记 如果有 精确数值单位,则必须按照先X 后Y 的写法 |
background-attachment | 背景固定还是滚动 | scroll/fixed |
背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |