整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《在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颜色都可以。
我们可以给所有的元素设置背景色，例如 body、h1、p、a 、div等等。
示例：
例如我们将页面的背景颜色设置为 #E0E0E0、标题的背景颜色设置为绿色 #33CC66，段落的背景颜色为白色 #FFFFFF：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h1>侠课岛欢迎你！</h1>
<p>段落背景为白色</p>
<p>段落背景为白色</p>
<p>段落背景为白色</p>
</body>
</html>
在 index.css 页面中的 CSS 样式代码：
body{
background-color: #E0E0E0;
}
h1{
background-color: #33CC66;
}
p{
background-color: #FFFFFF;
}
在浏览器中演示效果为：
如果使用的是外部样式要记得在 HTML 页面引入 .css 文件哟，否则 CSS 代码不会生效。
现在你可以试着使用一下 background-color 属性，假设在 <body> 标签内有一个 <div> 标签，我们需要给这个 <div> 标签设置一些样式，例如设置它的宽高分别为300px，背景颜色为 #FF9966 。然后在浏览器中打开这个页面，会产生什么效果呢？
我们除了可以将元素的背景设置成各种颜色，还可以将背景设置成图片，可以使用 background-image 属性来设置背景图片。属性值的格式为： url('图片地址') 。
示例：
我们准备了一张 310x210 的玫瑰花图片（大家自己找一张图片来测试也可），然后将这张图片设置为 <body> 标签的背景图片，使用标签选择器设置样式：
body{
background-image: url(./flower.png);
}
在浏览器中演示效果为：
我们可以看到上图中，虽然背景图片设置成功，但是图片重复很多张，如果我们不想背景图片重复，就需要用到 background-repeat 属性。
我们可以使用 background-repeat 属性来设置背景图片是否重复（平铺）。
可选的属性值如下所示：
在实际应用中，一般我们用的比较多的属性值是 no-repeat，设置图片不重复。
示例：
我们来看一下上述几个属性值的演示效果，例如设置背景图片仅在水平方向重复：
body{
background-image: url(./flower.png);
background-repeat: repeat-x;
}
在浏览器中演示效果为：
也可以将属性值设置为 no-repeat，用于设置背景图片不重复：
body{
background-image: url(./flower.png);
background-repeat: no-repeat;
}
在浏览器中演示效果为：
上述示例中，如果我们希望整张背景图片都充满整个页面，可以使用 background-size 属性来实现，此属性用于设置背景图像的尺寸。
可选的属性值如下所示：
示例：
例如我们将背景图片设置为覆盖全部背景区域，可以使用 cover 属性值：
body{
background-image: url(./flower.png);
background-repeat: no-repeat;
background-size: cover;
}
在浏览器中演示效果为：
背景定位就是我们可以根据需求将背景图片定位到页面的左边、右边、中间、底部等等任意位置，要实现背景定义，可以使用 background-position 属性。
可选的属性值如下所示：
属性值描述top、bottom、left、right 、 center通常这些关键字会成对出现，如果只设置一个关键字，那么第二个值将默认为 centerx% y%将属性值设置成百分比，第一个值是水平位置，第二个值是垂直位置xpos ypos单位是像素，第一个值是水平位置，第二个值是垂直位置
示例：
例如将背景图片定位到水平垂直居中位置：
body{
background-image: url(./flower.png);
background-repeat: no-repeat;
background-position: center;
}
在浏览器中演示效果为：
上述代码中，我们将 background-position 的属性值设置成了 center，并且因为此属性的属性值是成对出现的，如果没有设置第二个属性值，则其默认为 center，所以最终背景图片会水平垂直居中显示。
你可以自己动手设置 background-position 属性的值，例如将背景图片定位为 bottom right、100px 200px、30% 70%，看看这三组属性值最终会生成什么效果。
我们知道当页面的内容超出了浏览器的高度时，浏览器会自动出现滚动条。如果我们给某个页面设置了一个背景图像，随着滚动条向下滚动，背景图片也会跟着滚动，大家可以自己动手验证一下看看是不是这样。
所以如果我们希望背景图片固定在某个地方，当我们滚动滚动条时，不影响背景图片，要怎么办呢？
可以通过 background-attachment 属性来实现，此属性的作用就是用于设置背景图片是否固定或者随着页面的其余部分滚动。
可选的属性值如下所示：
示例：
将背景图片设置为固定，不随滚动条滚动：
body{
background-image: url(./flower.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
在浏览器中演示效果为：
可以看到当我们将 background-attachment 属性设置为 fixed 时，向下滚动滚动条时，背景图像是固定不变的。
我们可以通过 background 属性来简写上述讲到的几个背景样式属性。
background 属性可以简写的属性有如下所示 ：
在 background 属性中设置上述任意一个或多个属性的属性值，如果不设置其中的某个值，也不会出问题。
示例：
例如可以在 background 属性中同时设置页面背景颜色、背景图片、图片不平铺、图片固定、图片居中：
body{
background: pink url(./flower.png) no-repeat fixed center;
}
在浏览器中演示效果为：
上图中，如果我们不使用简写属性，则需要写 5 句 CSS 代码才能实现，但是通过使用 background 属性一句代码就搞定了，方便了很多。所以推荐使用 background 属性来设置背景样式。
那么本节我们关于背景样式的内容就学到这里，其实这些属性都很简单，大家可以将上述讲到的几个属性多使用几次，给它们设置不同的属性值，看看不同的属性值的演示效果有什么不同。
喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！
志同道合的小伙伴跟我一起学习交流哦！
1 背景颜色图片及其平铺
背景颜色background
CSS可以添加背景颜色和背景图片，以及来进行图片设置。
格式与用法如下：
div {
width: 500px;
height: 500px;
background-color: pink;
background-image: url(images/l.jpg);
background-repeat: no-repeat;
}
sublime小技巧：“bgc+tab”=background-color
其他的以此类推
2 背景位置（一）
背景位置position
语法：
background-position: length length;
background-position: position position;
background-position: left top;/*默认的是在左上角*/
background-position: bottom right;/*方位名词没有顺序，谁都在前都可以*/
background-position: left;/*如果方位名词只写一个，另一个默认为center*/
参数：
length：百分数丨由浮点数字和单位标识符组成的长度值。请参阅长度单位position:top center bottom left right
3 背景位置（二）
精确单位：
background-position: 10px 30px;
/*第一个值一定是x坐标 第二个值一定是y坐标*/
background-position: 10 center;
/*混搭*/
4 魔兽背景图片
想让图片往上移，可以是负数值
background-image: url(images/ms.jpg);
background-position: center -25px;
实际上用的最多的就是居中对齐
5 背景附着图
语法：
background-attachment: scroll、 fixed;
参数：
scroll：背景图像是随对象内容滚动
fixed：背景图像固定
说明：
设置或检索背景图像是随对象内容滚动还是固定的。
6 背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background背景颜色-背景图片地址-背景平铺-背景滚动-背景位置background:transparent url（image jpg） repeat-y scroll 50%0：
background: #000 url(images/lol.jpg) no-repeat fixed center 100px;
黑色 图片地址 不平铺 水平居中 垂直100像素
后面的两个位置值是不能分开的
7 背景半透明
CSS3支持背景半透明的写法语法格式是
background: rgba(0, 0, 0, 0.7);
最后一个参数是 alpha透明度取值范围0-1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
同样，可以给文字和边框透明都是rgba的格式来写。
8 背景缩放（一）
通过 background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a）可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）
background-size:50% ;
背景图片设置为原来的50%大小
9 背景缩放（二）
b）设置为 cover时，会自动调整缩放比例，保证图片始终填充满背景区堿，如有溢出部分则会被隐藏。
C）设置为 contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
10 多背影图片
以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。
1 一个元素可以设置多重背景图像。
2 每组属性间使用逗号分隔。
3 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
4 为了避免背景色将图像盖住，背景色通常都定义在最后一组上
div {
height: 300px height:300px;
background: url(images/l.jpg) no-repeat left top,
url(images/3.jpg) no-repeat right bottom hotpink
11 凹凸文字效果
12 王者荣耀导航栏（一）
13 王者荣耀导航栏（二）
文本的装饰
text-decoration通常我们用于给链接修改装饰效果
使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中
看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。
本章已结束，下篇文章将分享《09 CSS三大特性》小伙伴们不要错过哟！
*请认真填写需求信息，我们会在24小时内与您取得联系。
