欢迎来访
纯白T
time：2020-01-05
要点总结：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS 背景
CSS 背景属性用于定义HTML元素的背景。
背景颜色--background-color
属性定义了元素的背景颜色.
全局化背景
上图是全局化背景定义：
<style>
body{background-color:#FFEE00;}
</style>
也可以设置不同区域，例如h1, p, 和 div 元素拥有不同的背景颜色:
分区
<style>
body{background-color:#70ED6B}
h1 {background-color:#6495ed;}
p {background-color:#FFEE00;}
div {background-color:#b0c4de;}
</style>
背景图像--background-image
属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
默认
<style>
body {background-image:url('纯白T.jpg');}
</style>
以下是小编总结的平铺以及固定的特点：
- 水平平铺：background-repeat:repeat-x;
- 垂直平铺：background-repeat:repeat-x;
- 不展开平铺：background-repeat:no-repeat;
- 背景图片不重复：background-position:right top;
- 图文隔开，设置（左右间距）：margin-right:200px;
综合demo：
image
代码片段：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CB-T</title>
</head>
<style>
body{
background-color:#FFEE00;
background-image:url('纯白T.jpg');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
<body>
<h1>内嵌CSS</h1>
<p>我的第一个段落。</p>
<div>CB小试水，欢迎关注</div>
<div>CB小试水，欢迎关注</div>
<div>CB小试水，欢迎关注</div>
</body>
</html>
背景- 简写属性
上述的background属性皆可简写，例如：
body {background:#FFEE00 url('纯白T.jpg') no-repeat right top;}
PS：当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
以上属性具有一定顺序，你可以按照页面的实际需要使用.
emmmmemmmm，想了想小编库存一个HTML颜色神器
上图：
SQ
觉得需要的童鞋，留言小编，第一时间为你奉上》》》
分享小节分享到此，
侵删
纯白T
