-background-color: background color
{
background-color:#333333;
}
{
background-color:rgb(255 255 255);
}
{
background-color:gray;
}
css中颜色表示法：
1.单词表示法
2.十六进制表示法
0 1 2 3 4 5 6 7 8 9 a b c d e f
#ffffff
3.rgb三原色表示法：rgb(255 255 255);
取值范围：0~255
提取颜色的下载地址：https://www.baidufe.com/fehelper
-background-image: background image (without quotation marks)
background-image： url(背景地址)
{
background-image:url(../images/position.png);
}
-background-repeat: the tiling method of the background image
{
background-repeat:no-repeat/repeat/repeat-x/repeat-y }
默认：会水平垂直都铺满
repeat-x
repeat-y
repeat (x,y都进行平铺)
no-repeat(都不平铺)
-background-position: the position of the background image
{
background-position:x y;
}
第一个值为水平方向上的对齐方式
第二个值为垂直方向上的对齐方式
用单词时：（水平方向） x:left 、center 、right
（垂直方向） y:top、 center、 bottom
如果仅规定了一个关键词，那么第二个值将是"center"。
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
用数值时：
x、y都为正值时，往右往下移动
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
仅规定了一个值，另一个值将是50%。
用百分比时：
x% y%
如果仅规定了一个值，另一个值将是50%。
左上角是 0% 0%。右下角是 100% 100%。
Practice example:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 306px;
}
p{
width: 100px;
height: 100px;
border: 1px dashed gray;
float: left;
margin: 0;
}
p:nth-child(1){
background-image:url(../images/position.png);}
p:nth-child(2){
background:url(../images/position.png) -100px 0px;}
p:nth-child(3){
background:url(../images/position.png) -200px 0px;}
p:nth-child(4){
background:url(../images/position.png) 0px -100px;}
p:nth-child(5){
background:url(../images/position.png) -100px -100px;}
p:nth-child(6){
background:url(../images/position.png) -200px 100px;}
p:nth-child(7){
background:url(../images/position.png) 0px -200px;}
p:nth-child(8){
background:url(../images/position.png) -100px -200px;}
p:nth-child(9){
background:url(../images/position.png) -200px -200px;}
p:nth-child(10){
background:url(../images/position.png) 0px -300px;}
p:nth-child(11){
background:url(../images/position.png) -100px -300px;}
p:nth-child(12){
background:url(../images/position.png) -200px -300px;}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
-background-attachment: the way the background image moves with the scroll bar
scroll 默认值 背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
如果设置background-position：50% 50%;设置scroll背景图的位置就在块元素的中央，如果设置为fixed背景图就在浏览器的中央。
Abbreviated syntax for background attributes:
书写格式
background : background-color background-image background-repeat background-attachment background-position;
默认值
background: transparent none repeat scroll 0% 0%;
（透明 / 无背景图片 / 平铺 / 背景图片随文本滚动 / 位于元素左上角）
复合样式与单一样式尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。
如果复合在单一后面，复合会把单一样式覆盖掉。
-Picture formats commonly used on web pages (compressed pictures)
1) jpg: lossy compression format, which reduces the size of the picture by losing the quality of the picture itself, and is suitable for images with rich colors; (composed of pixels, the more pixels will be clearer) if the webpage
2) gif: lossy compression format, which reduces the size of the picture by losing the number of colors of the picture, supports transparency, supports animation, and is suitable for images with a small number of colors;
3) png: lossy compression format, loss of the number of colors of the picture to reduce the size of the picture, supports transparency, does not support animation, is the source file format of fireworks, suitable for images with a small number of colors;