一、背景颜色图片平铺
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺 默认是平铺
background-position 背景位置 (模式是左上角 0 0) 方位没有顺序
1.(length 长度 )写精确单位 或者百分比 第一个值是x坐标 第二个一定是y
2.(position: top|center | bottom | left | right 方位坐标)
如果方位名词只写一个 另外一个默认为center
3.混搭也ok
background-attachment 设置背景图是否固定 默认是scroll, fixed是固定
合写: background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: #000 url(image/timg.jpg) no-repeat center -25px fixed;
二、背景缩放
景缩放
background-size 100px; 等比例缩放 尽量只改一个值 否则图片会是真扭曲也可以写百分比
常用的两个参数:
cover :会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出自动隐藏
contain:图片等比例缩放,如果图片的宽度或者高度有一个和盒子一样大了就不在缩放,不会有缺失的部分,保证了图片的完整性。
多背景图片设置
width: 800px;
height: 500px;
background: url(image/harry.jpg) no-repeat left top,
url(image/denglun.jpg) no-repeat right bottom purple;
以逗号分隔可以设置多背景,课用于自适应布局,注意事项:
1. 一个元素可以设置多重背景图片
2. 每组属性间使用逗号分隔
3. 如果设置了多重背景之间存在交集,前面的图片会覆盖在后面图片之上
4. 为了避免背景色将图片覆盖,背景色通常定义在最后一组上
三、小复习 shadow文字阴影和文本修饰
凹凸文字效果,shadow实现
div:first-child {
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
文本修饰
text-decoration:
none 默认 定义标准的文本 取消文本装饰
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
设置文字水平居中小tip
设置文字的行高等于盒子的高度
line-height: 50px;
来源:oschina
链接:https://my.oschina.net/u/4332911/blog/3343494