day10
CSS背景
背景样式
backgroud-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-repeat 设置背景图像是否重复及如何重复
background 简写属性，作用是将背景属性设置在一个声明中
列表样式
list-style-type 设置列表项标志的类型
list-stle-image 讲图像设置为列表项标志
list-style-position 设置列表中列表项标志的位置
list-style 简写属性。用于把所有列表的属性设置于一个声明中
设置元素的背景颜色
backgound-color:颜色|transparent
北京区包括内容，内边距（padding）和边框，不包括外边距（margin）
设置元素的背景图片
background-image:URL|none）
元素的背景占据了元素的全部尺寸，包括内边距和边距，但不包括外边距
默认的，背景图像卫浴左上角，并在水平和垂直方向上重复。
背景图片会覆盖背景颜色
背景图片重复
设置元素的背景图片的重复方式
background-repeat:repeat|no-repeat|repeat-x|repeat-y
背景图片显示方式
设置原色的背景图片的显示方式
background-attachment:scroll|fixed
背景图片定位
设置元素的背景图片的起始位置
background-position:百分比|值
top|right|bottom|left|center
背景缩写
background：[background-color][background-attachment][background-image]
[background-position][background-repeat]
各值之间用空格分割，不分先后顺序
background-color.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 300px; height: 300px; /*background-color: transparent;*/ /*background-color: #f00;*/ /*background-color: red;*/ background-color: rgb(255,0,0); /*padding: 10px;*/ /*margin: 10px;*/ border: 10px dashed black; } </style> </head> <body> <div>background-color</div> </body> </html>
background-image,html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 300px; height: 300px; background-color: #f00; background-image: url(img/bg-little.png); /*margin:20px;*/ /*padding: 20px;*/ /*border: 20px dashed;*/ } </style> </head> <body> <div></div> </body> </html>
background-repeat.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 300px; height: 300px; background-image: url(img/bg-little.png); /*background-repeat: no-repeat;*/ /*background-repeat: repeat;*/ /*background-repeat: repeat-x;*/ background-repeat: repeat-y; border: 1px solid #f00; } </style> </head> <body> <div></div> </body> </html>
background-position.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 300px; height: 1500px; background-image: url(img/bg-little.png); background-repeat: no-repeat; border: 1px solid #f00; background-position: top left; } </style> </head> <body> <div></div> </body> </html>
background-attachment.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 300px; height: 1500px; background-image: url(img/bg-little.png); background-repeat: no-repeat; border: 1px solid #f00; /*background-attachment: scroll;*/ background-attachment: fixed; } </style> </head> <body> <div></div> </body> </html>
background.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 300px; height: 1000px; border: 1px solid; background: #000 url(img/bg-little.png) no-repeat top left fixed; } </style> </head> <body> <div></div> </body> </html>