css背景设置
css规定一下与背景相关的属性：
2 background-image； 背景图片
3 background-repeat； 背景重复
4 background-position； 背景位置
5 background-size； 背景尺寸
6 background-attachment； 背景粘附
7 background（简写属性）；
8 background-clip、background-origin、background-break（目前尚未得到广泛支持）。
下面逐个介绍：
1 背景颜色 background-color；背景图片 background-image；
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<p>段落</p>
</body>
</html>css代码：
*{
margin: 0 ;
padding: 0;
background-color: #333;
}
p{
margin:20px;
background-color: #ccc;
color: red;
border-style: solid;
border-width: 5px;
}图示：
body元素的背景颜色设置：background-color: #333;
p元素的背景颜色设置：background-color: #ccc;
发现：在没有设置边框颜色的情况下，边框的颜色与文本的颜色一致。实际上文本颜色color是前景色，边框颜色在没有设置的情况下与前景色一致。
2 背景图片 background-image；
css代码：
*{
margin: 0 ;
padding: 0;
}
p{
margin:20px;
width: 300px;
height: 300px;
border: 1px solid #ccc;
background-image: url(index.png);
}
图示：
发现：在图片很小的情况下，默认会沿水平，垂直方向重复出现直到铺满。
3 背景重复 background-repeat；
background-repeat: repeat-x;沿着x轴平铺；background-repeat: repeat-y;沿着y轴平铺；no-repeat不平铺。
4 背景位置 background-position；
这个属性有5个关键字值，分别是top、left、bottom、right和center，任意两个组合都可以作为该属性的值（默认top left)。 当然top bottom这样写没有什么意义。如果只设置一个值则第二个值默认为center。
也可用百分比表示 50% 50%表示水平垂直居中。
总结：
4 ) 像素之类的绝对单位数值就不一样了。要是用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。
5 ) 还可以使用负值。这样就可以把图片的左上角定位到元素外部，从而在元素中只能看到部分图片。当然，给图片设定足够大的正值，也可以把图片的右下角推到元素外部，从而在元素中也只能看到部分图片。位于元素外部的那部分图片不会显示。
5 背景尺寸 background-size；
这个属性有四种设置方法：
1) 百分比 50% 50%：缩放图片，使其填充背景区的一半，如果只设置一个值则第二个值为auto；
2) 宽高值 100px 50px ：设置背景图片高度和宽度如果只设置一个则第二个为auto；
3) cover：拉大图片，使其完全填满背景区；保持宽高比；
4) contain：缩放图片，使其恰好适合背景区；保持宽高比。
6 背景粘附 background-attachment :控制滚动元素内的背景图片是否随元素滚动而移动。
默认值是scroll，即背景图片随元素移动。如果把它的值改为fixed，那么背景图片不会随元素滚动而移动。
background-attachment :fixed;最常用于给body元素中心位置添加淡色水印，让水印不随页面滚动而移动。
7 background 简写背景属性：
background: #ccc url(demo.jpg)no-repeat center;
当背景颜色与背景图片都存在时，图片会将颜色覆盖。
8 background-clip：控制背景绘制区域的范围，比如可以让背景颜色和背景图片只出现在内容区，而不出现在内边距区域。默认情况下，背景绘制区域是扩展到边框外边界的。
background-origin：控制背景定位区域的原点，可以设定为元素盒子左上角以外的位置。比如，可以设定以内容区左上角作为原点。
background-break：控制分离元素（比如跨越多行的行内盒子）的显示效果。
9 linear-gradient() 渐变属性：
线性渐变：
background: linear-gradient(#fff,#ccc); 默认从左到右渐变
background: linear-gradient(to left,red,#ccc); 设置从左到右渐变
background: linear-gradient(-45deg,#fff,#ccc); 设置从左上到右下
渐变点：可以在这些点上设定颜色和不透明度。通过设定下一个渐变点的颜色值，就可以控制渐变的效果。可以添加任意多个渐变点。渐变点的位置一般使用整个渐变宽度的百分比来表示。
background: linear-gradient(#fff,#64d1dd 50%,#ccc);在50%处有个渐变点
图示：
background: linear-gradient(#fff 20%,#64d1dd,#ccc 80%);两个渐变点
图示：
background: linear-gradient(#e86a43,#64d1dd 75%, #fff 75%, #e86a43);同一渐变点设置两种颜色有突变效果。
图示：
放射性渐变：
如果哪里写错了，有疑惑可留言哦，谢谢指出，共同进步哦！
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
