整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
举例：
下面这些例子使用下面这张图片做为背景图：
1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。
2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test background</title>
<style type="text/css">
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg1{background:cyan url(bg.jpg);}
.bg2{background:cyan url(bg.jpg) repeat-x;}
.bg3{background:cyan url(bg.jpg) repeat-y;}
.bg4{background:cyan url(bg.jpg) no-repeat;}
.bg5{background:cyan url(bg.jpg) no-repeat left center;}
.bg6{background:cyan url(bg.jpg) no-repeat right center;}
</style>
</head>
<body>
<div class="backshow bg1"></div>
<div class="backshow bg2"></div>
<div class="backshow bg3"></div>
<div class="backshow bg4"></div>
<div class="backshow bg5"></div>
<div class="backshow bg6"></div>
</body>
</html>
例子说明：
background-position的设置，可以在水平方向设置“left”、“center”、“right”，在垂直方向设置“top”、“center”、“bottom”，除了设置这些方位词之外，还可以设置具体的数值。
比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：
用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。
实现原理示意图：
对应代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test background</title>
<style type="text/css">
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg{width:94px;
height:94px;
border:3px solid #666;
background:url(location_bg.jpg) -110px -150px;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
理解练习：
通过雪碧图制作如下布局：
望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《在CSS中使用background属性，调整页面和块背景，系统讲解背景属性》
本文承接上一篇文章中所讲到的background属性，通过几个简单实用的小例子，学些背景效果的各种实现方式。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
所承接的上一篇文章中，主要介绍了下列背景属性：
background-color
background-image
background-repeat
background-position
background-attachment
本文在上一篇文章的基础上，复习和巩固这五个属性的具体用法。
首先制作一张水印效果的图片。该图片的内容透明度较低，图片较小。本例中制作了一个宽度为290像素，高度为205像素的图片。该图片的文件名为back01.jpg。图片内容为两行文本，颜色为黑色，同时调整了两行文本的不透明度。图片效果如下所示，大家也可以根据自己喜好利用Photoshop随意制作。
例1素材图片 back01.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{background-image:url("back01.jpg");}
</style>
由于图片本身的尺寸远远小于整个页面的大小，所以在默认情况下，该图片会在页面中平铺以产生下列背景效果。
例1最终效果图
首先制作一张花边图片。该图片包含一个花边图样，图片较小。本例中制作了一个宽度为172像素，高度为36像素的图片。该图片的文件名为back02.jpg。图片效果为：
例2 素材图 back02.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{
background-image:url("back02.jpg");
background-repeat:repeat-x;
}
</style>
由于图片本身的尺寸远远小于整个页面的大小，同时又设置为水平方向平铺，所以该图片会在页面中产生下列背景效果。
例2最终效果图
首先制作一张渐变图片。该图片包含自上而下的蓝白渐变。本例中制作了一个宽度为1像素，高度为200像素的图片。该图片的文件名为back03.jpg。图片效果为：
例3 素材图片 back03.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
}
</style>
由于图片的宽度远远小于整个页面的宽度，同时又设置了水平方向平铺，所以该图片该图片会在页面中产生下列背景效果。
同时，由于页面本身的颜色默认为白色，因此，该渐变色下方的白色与页面背景颜色融合。因此，当页面过长产生垂直滚动条后，不会影响背景颜色的自然过渡。
那么，若需要给页面背景添加自上而下的白蓝渐变，应该如何设置呢？渐变色下方的蓝色与页面背景无法融合，会产生明显的蓝白边界。该问题的解决方法是将页面的背景颜色由默认的白色调整为渐变色下方的颜色即可。代码如下：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
background-color:# 8181fc; //渐变色下方的蓝色
}
</style>
首先制作一张可以居中放置的图片。本例中制作了一个宽度为500像素，高度为500像素的图片。该图片的文件名为back04.jpg。图片效果为：
例4 素材图片 back04.jpg
实现该效果的代码如下所示。
<style type="text/css">
body{
background-image:url("back04.jpg"); //加载图片
background-repeat:no-repeat; //设置不平铺
background-position:center center; //位置在页面中心
background-attachment:fixed; //页面滚动时图片固定
}
</style>
下一篇文章中，小海老师会带领大家学习CSS中功能强大的图片精灵技术（CSS Sprite）。对于渴望在前端开发道路上前进的你一定不能错过！
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
过CSS背景属性，可以给页面元素添加背景样式。
背景属性可设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
background-color：rgb值或颜色单词；
默认背景颜色值为transparent（透明）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
/* 背景颜色 */
.bg-color {
background-color: transparent;
}
.bg-color-trans {
text-align: center;
background-color: pink;
width: 100px;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="bg-color">背景颜色
<div class="bg-color-trans">透明背景</div>
</div>
</body>
</html>效果：
Background-image：图片路径URL；
默认背景图片值为none。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-image {
background-image: url(../images/meitizhub.jpg);
}
</style>
</head>
<body>
<div class="bg-image">背景图片</div>
</body>
</html>效果：
background-repeat：repeat | no-repeat | repeat-x | repeat-ybackground-repeat：repeat；
默认情况下背景图片状态为平铺，指的是图片会从左向右且从上到下整个铺满盒子。
background-repeat：no-repeat；
关闭默认平铺状态，只在盒子左上角显示一个完整的背景图片。
background-repeat：repeat-x；
沿着x轴方向在盒子内最顶部横向平铺背景图片。
background-repeat：repeat-y；
沿着y轴方向在盒子内最左侧纵向平铺背景图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-repeat {
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="bg-image">背景平铺默认值</div>
<div class="bg-image bg-repeat">背景不平铺</div>
<div class="bg-image bg-repeatx">x轴方向平铺背景图片</div>
<div class="bg-image bg-repeaty">y轴方向平铺背景图片</div>
</body>
</html>效果：
background-position：x y；x轴和y轴的值可以是方位名词或者精确数值都可。
方位名词：top、bottom、center、left、right。
当属性值使用方位名词时如果只写一个值，则第二个值默认为居中状态。
当属性值使用精确数值时如果只写一个值，则默认是x轴方向的值，y轴方向默认垂直居中。
如果参数是方位词和精确单位混合使用时，默认第一个值是x值，第二个是y值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid;
}
.bg-position {
background-repeat: no-repeat;
background-position: center top;
}
.bg-position2 {
background-repeat: no-repeat;
background-position: right;
}
.bg-position3 {
background-repeat: no-repeat;
background-position: 20px 50px;
}
.bg-position4 {
background-repeat: no-repeat;
background-position: 20px ;
}
.bg-position5 {
background-repeat: no-repeat;
background-position: 80px bottom ;
}
</style>
</head>
<body>
<div class="bg-image bg-position">背景图片存放位置1</div>
<div class="bg-image bg-position2">背景图片存放位置,设置一个值</div>
<div class="bg-image bg-position3">背景图片存放位置精确单位值</div>
<div class="bg-image bg-position4">背景图片存放位置精确单位值</div>
<div class="bg-image bg-position5">背景图片存放位置混合使用</div>
</body>
</html>效果：
background-attachment：scroll | fixed；背景图像在页面的某一处固定不动或者随页面的其余部分滚动。可以制作视差滚动效果。
background-attachment：scroll ；
默认值，背景图像固定在页面上，随着滚动条滚动而移动。
background-attachment：fixed；
背景图像固定在某一区域，滚动条滑动时位置不变。
body {
background-image: url(../images/43619545307190.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}background：背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置；
没有特定书写顺序，按需使用属性。
实现背景颜色半透明效果。
background：rgb（0,0,0, 0.3）；最后一个参数是alpha透明度，取值范围在0~1之间。
总结：
属性 | 定义 | 值 |
Background-color | 背景颜色 | Rgb值 | 十六进制 | 颜色英文单词 |
Background-image | 背景图片 | Url（图片路径） |
Background-repeat | 背景平铺 | Repeat | no-repeat |repeat-x |repeat-y |
Background-position | 背景固定 | x轴和y轴。方向名词或者精确数值 |
Background-attachment | 背景附着 | Scroll（固定在页面上）| fixed（与滚动条固定） |
背景复合写法 | 代码简洁 | 背景颜色、图片地址、平铺、 滚动、位置。 |
背景颜色半透明 | 显示效果 | Background：rgba（0,0,0，0~1） |
*请认真填写需求信息，我们会在24小时内与您取得联系。
