背景图片
1.background
一通过该属性可以同时设置所有背景相关的样式
没有顺序的要求,谁在前谁在后都行
也没有数量的要求,不写的样式就使用默认值
2.background- attachment用来设置背景图片是否随页面一起滚动
scroll.默认值,背景图片随着窗口滚动
fixed.背景图片会固定在某一位置,不随页面滚动
不随窗口滚动的图片,我们一般都是设置给body,而不设置给其他元素
3background-position
.背景图片默认是贴着元素的左上角显示
*通过background-position可以调整背景图片在元素中的位置
属性left top right bottom center可用其中两个值来设置
4.background-repeat用于设置背景图片的重复方式
repeat,默认值,背景图片会双方向重复(平铺)
no-repeat。背景图片不会重复,有多大就显示多大
repeat-x.背景图片沿水平方向重复
repeat-y,背景图片沿垂直方向重复
5.使用background- image来设置背景图片
如果背景图片大于元素,默认会显示图片的左上角
如果背景图片和元素一样大,则会将背景图片全部显示
如果背景图片小于元素大小, 则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片,
这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
6.opacity
设置元素的透明背景
用0-1的值
0表示完全透明 1表示完全不透明
定位
1.z-index
.如果定位元素的层级是一样的,下边的元素会盖住上边的
通辻z-index属性可以用来没置元素的层级
可以为z - index指定-一个正整数作为值,该值会作为当前元素的层级
层级越高,越先显示
但是対于没有开启定位的元素 不能使用z- index
2.position元素
static:默认值,元素没有开启定位
relative:开启元素的相対定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位(绝对定为的一种)
1.relative
1.相対定位是相対于元素在文档流中原来的位置进行定位
2.相対定位的元素不会脱离文档流
3.相対定位会使元素提升一个层级
4.相对定位不会改变元素性质,块依旧是块
2absolute绝对定位
1.开启绝对定位, 会使元素脱离文档流
2.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的
如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质,
内联元素变成块元素,
块元素的宽度和高度默认都被内容撑开
3.fixed固定定位
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动