整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
如果网页只有一种颜色，那是非常可怕的，颜色的设置丰富了网页，就如同多彩缤纷的世界。
在了解css颜色之前，我们回顾下计算机是如何显示颜色的？计算机根据色光三原色的原理通过各种算法来显示颜色。
网页中使用颜色关键字、16进制字符、rgb、rgba等表示红，绿，蓝三种颜色混合色，如下示例,几种写法都是指同一个颜色（红色）：
color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)对于16进制形式，每2位表示一个颜色，从左到右分别是红、绿、蓝，每种颜色取值从00 到 FF。
如下示例：
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*红色*/
color: #00ff00; /*绿色*/
color: #0000ff; /*蓝色*/对于rgb的表示法，由三个参数组成，分别是红、绿、蓝，每种颜色取值从0 到 255。
如下示例：
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*红色*/
color: rgb(0,255,0); /*绿色*/
color: rgb(0,0,255); /*蓝色*/红，绿，蓝值从0到255的结合，给出了总额超过1600多万不同的颜色（256 × 256 ×256）。
但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意，避免设置不能够显示的颜色，可以参考网页安全色：https://www.w3school.com.cn/cssref/css_colors.asp。
颜色除了有三原色红绿蓝组成，还有亮度层级，如下图：
rgba 中的a是指透明度，这个是css3新增加的属性，通过rgba可以设置更加漂亮的颜色。
通过background属性可以设置元素的背景色、背景图片，语法如下：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;background 在一个声明中设置所有的背景属性，可以在这里设置如下属性：
各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允许的，但至少有一个值。
建议使用background 简写属性，这样可以更好地兼容较老的浏览器，少写很多代码，当然你也可以分开使用，比如：
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;1、背景颜色 —— background-color
background-color 和之前讲的的color 一样，可以使用16进制、rgb、rgba等设置颜色。如下实例：
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>如下图显示：
注意：background-color: transparent; 指透明色，不显示任何颜色。
2、背景图片的使用——background-image
给html元素添加背景图片，在早期网页制作中被广泛应用，如今已不建议大量使用。如下实例：
body {background-image:url(/static/bg.gif);}这里使用了一个125*125大小的图片，如下：
但是你会发现，整个网页铺满了图片，上面的代码默认会铺满整个页面从左到右，从上到下 。如果不想被平铺，可以使用background-repeat 设置。
背景图片同时可以设置多个背景图片，如下：
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);多个图像以逗号隔开，在页面中多个图片会叠加显示，第一张图片显示在最顶端。
如下效果：
3、背景重复方式 —— background-repeat
它有如下几个属性：
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像不重复。 |
inherit | 从父元素继承 background-repeat 属性的设置。 |
实例如下：
4、背景图的位置 —— background-position
背景图片默认显示在左上角，语法如下：
background-position: x y; // x 距离左边距离，y距离顶部距离如果要改变它的位置，可以使用关键字：top、bottom、left、right 和 center；或者使用长度值，如 100px 或 5cm；也可以使用百分数值。
x 可以取值 百分比| 数值| left | center | right。
y 可以取值 百分比| 数值| top| center | bottom。
当只设置一个值的时候，另一个会缺省为 center。
使用关键字，将背景图片水平居中，垂直居中：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 使用百分比%：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 50% 50% 等同于 center center，显示效果和上图一样。
还可以使用具体数值，比如 px、em、cm等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 显示效果如下：
5、背景图相对于容器的基准点 —— background-origin
就是设置背景图片相对于html元素什么位置作为初始坐标点，语法：
background-origin: padding-box|border-box|content-box;几种值得含义：
padding-box | 背景图像相对填充框的位置 |
border-box | 背景图像相对边界框的位置 |
content-box | 背景图像相对内容框的位置 |
如下实例：
6、背景图片大小 —— background-size
默认会显示背景图原始尺寸，可以通过此属性设置背景图片在元素上的大小，语法：
background-size: width height;宽度和高度可以使用 数值、百分比%、cover 及 contain ;
数值：可以使用任何单位的数字，比如 px、em、cm等。如果设置一个值，第二个为"auto(自动)"。
百分比%：相对于其所在html原始宽度和高度，如果设置一个值，第二个为"auto(自动)"。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
如下示例：
7、背景图像是否固定或者随着页面的其余部分滚动
background-attachment 属性有以下几个值：
scroll | 背景图片随页面的其余部分滚动。这是默认 |
fixed | 背景图像是固定的 |
inherit | 指定background-attachment的设置应该从父元素继承 |
local | 背景图片随滚动元素滚动 |
如设置一个固定的背景图片，不跟随页面滚动：
background-attachment:fixed;滚动滚动条，会发下背景图片始终固定在屏幕那个位置。
8、背景绘制区域 —— background-clip
语法如下：
background-clip: border-box|padding-box|content-box;border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 |
padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
这个属性类似于 background-origin ，只不过它会裁剪背景图片，如下示例：
9、背景层的混合模式 —— background-blend-mode
所谓混合模式就是将图片与颜色或图片与图片进行混合，语法：
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;属性值：
示例如下：
正常模式
luminosity 亮度模式
color 颜色模式
其它模式可以自己试试，看下有什么区别。
到此，我们了解了颜色和背景的使用方法，尤其是背景的使用，由于它的属性很多，可以简写也可以分开写，要想完全掌握，还得多练习，每种属性进行组合使用看看其效果。
一般建议使用 background 简写方式，主要是可以少写很多代码。以上介绍难免有误，或不齐全，欢迎指出错误，并补充。
上篇：前端入门——css链接样式
望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《在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教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
篇文章结合上一篇所讲到的CSS3技术中有关背景的属性，制作一个实例。小海前端（头条号）带领大家一同实现一个漂亮的信纸背景效果。
承接文章：更加强大的背景图像，CSS3增强的背景效果，前端对背景的优化
技术等级：中级 | 适合有一定的CSS基础的人士阅读。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
一、信纸背景实例效果：
本篇文章所实现的信纸背景效果如下图所示。
信纸背景实例的最终效果图
首先要明确一点：上图中看到的除了文字以外的背景部分，并不是一张完整的背景图片，而是由多个具有透明背景的png图片利用CSS3的多重背景拼接出来的。
本实例所使用到的素材图片如下图所示。
用到的素材图片
从上图中可以看出，我们一共使用了六张素材图片。前五张图片都是png格式，背景为透明。最后一张图片是一个纹理jpg图片，可以随意设置透明效果的纹理。
left-bottom.png，实现左下角的花边效果。
left-top.png，实现左上角的花边效果。
right-bottom.png，实现右下角的花边效果。
right-top.png实现右上角的花边效果。
line.png，实现信纸的水平线格子效果
wenli.jpg，实现信纸的背景纹理效果。
跟着小海前端（头条号）学的小伙伴们，可以自行在网上搜索图片，利用Photoshop制作成素材的样子，大家可以发挥自己的设计头脑，制作出各种不同的信纸效果。
二、页面布局：
这个实例的页面布局非常简单，制作一个<div></div>标记对作为容器，并将该容器的id属性的取值设置为mail。然后在容器内部放置<h1></h1>标记对作为标题，信件的正文使用<p></p>标记对进行包裹即可。
HTML代码结构如下所示。
<div id="mail">
<h1>古埃及的金字塔</h1>
<p>信件的正文</p>
</div>
三、利用CSS设置#mail的常规属性：
为了便于查看，可以设置#mail的CSS样式。设置该容器的宽度为400像素，高度为600像素。并设置容器在页面内居中显示。将容器的填充宽度设置为50像素，并在容器外部添加一个10像素的深红色边框线。
最后调整内部文字的CSS样式。包括文字的字号设置为14像素，首行缩进为28像素，行高为27像素。当然也可以根据水平线格子的间隔高度自行调整上述参数。
CSS代码如下所示。
#mail{
width:400px; height:600px;
margin:0 auto;
padding:50px;
border:solid 10px rgba(132,26,26,0.8);
font-size: 14px;
line-height: 27px;
text-indent: 28px;
}
四、加载背景图片：
接下来我们要为#mail加载背景图片，这需要将素材图片中准备的所有png图片和wenli.jpg图片全部加载到该容器中作为背景。
CSS3中的background-image已经支持多背景图片的功能，只需要将多个图片的url()路径之间利用逗号隔开即可。一定要注意：必须是逗号进行间隔。
CSS代码如下所示。
background-image: url(../images/line.png),
url(../images/left-top.png),
url(../images/left-bottom.png),
url(../images/right-top.png),
url(../images/right-bottom.png),
url(../images/wenli.jpg);
五、设置多背景图片的背景属性：
下一步需要设置多背景图片的其他背景属性。这需要根据background-image属性加载背景图片的顺序来完成其他背景属性的设置。
这里需要注意，上一步的代码中显示，第一个加载的是水平线格子图片line.png，接下来一次加载的是左上角花边、左下角花边、右上角花边、右下角花边，最后是纹理图片wenli.jpg。
1、设置背景图片的平铺方式：
我们知道：第一个加载的水平线格子图片应该平铺；四个方向角的花边图片不应该平铺；纹理图片应该平铺。
因此根据背景图片的加载顺序可以书写成如下格式：
background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
大家仔细观察，所有的平铺取值都是使用逗号隔开的，而且共有6个平铺取值，正好对应background-image属性中加载的六张图片的顺序。
2、设置背景图片的定位：
这里使用background-position属性来设置背景图片的定位。
第一个加载的水平线格子图片因为平铺，所以位置可以从容器的左上角就开始显示。因此取值为left top。
左上角花边应该显示在左上角，即left top。
左下角花边应该显示在左下角，即left bottom。
右上角花边应该显示在右上角，即right top。
右下角花边应该显示在右下角，即right bottom。
最后一个加载的纹理图片因为也平铺，所以也从左上角开始显示。
CSS代码如下所示：
background-position: left top,left top,left bottom,right top,right bottom,left top;
3、设置图片的大小：
这里可以根据背景图片本身的大小进行适当的缩放。
CSS代码如下所示：
background-size: 50px,20%,20%,20%,20%,50px;
属性background-size原本需要指定两个数值来表示宽度和高度的大小变化。若只指定了一个数值，则宽度和高度均采用该数值来对图片进行缩放。
4、设置图片显示的原点坐标：
这里只有水平线格子图片和纹理图片的显示需要调整原点坐标。
水平线格子只出现在由文本内容的部分，因此设置为content-box，从文本区域开始显示。
纹理图片可以设置为padding-box，即从填充区域开始显示。
其他图片都设置为border-box，即从边框开始显示。
CSS代码如下所示。
background-origin: content-box,border-box,border-box,border-box,border-box,padding-box;
5、设置图片的显示区域：
每张图片的显示区域都从所设置的原点坐标就开始显示，因此取值与原点坐标的取值是相同的。
CSS代码如下所示。
background-clip: content-box,border-box,border-box,border-box,border-box,padding-box;
六、整个实例的完整CSS代码：
本篇文章带领大家所制作的信纸背景效果的完整CSS代码如下图所示。
完整的CSS代码
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
下一篇文章中，小海前端（头条号）会为小伙伴们继续介绍CSS3新增的属性值。下一篇文章介绍CSS3的边框属性功能。
*请认真填写需求信息，我们会在24小时内与您取得联系。
