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>02css背景10
原文地址：https://www.cnblogs.com/shink1117/p/8432464.html