- 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： url(背景地址)
{
background-image:url(../images/position.png);
}
- background-repeat:背景图片的平铺方式
{
background-repeat:no-repeat/repeat/repeat-x/repeat-y }
默认：会水平垂直都铺满
repeat-x
repeat-y
repeat (x,y都进行平铺)
no-repeat(都不平铺)
- background-position：背景图片的位置
{
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%。
练习示例：
代码：
<!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:背景图随滚动条的移动方式
scroll 默认值 背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
如果设置background-position：50% 50%;设置scroll背景图的位置就在块元素的中央，如果设置为fixed背景图就在浏览器的中央。
背景属性的缩写语法：
书写格式
background : background-color background-image background-repeat background-attachment background-position;
默认值
background: transparent none repeat scroll 0% 0%;
（透明 / 无背景图片 / 平铺 / 背景图片随文本滚动 / 位于元素左上角）
复合样式与单一样式尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。
如果复合在单一后面，复合会把单一样式覆盖掉。
- 网页上常用的图片格式（压缩图片）
1)jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )如果网页中
2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;