整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS Colors
CSS的颜色可以通过以下方法指定：
十六进制颜色
RGB颜色
RGBA颜色
HSL色彩
HSLA颜色
预定义/跨浏览器的颜色名称
十六进制颜色
所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。
<p例如，＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。
实例
p
{
background-color:#ff0000;
}
RGB颜色
RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。
例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其他设置为0。
此外，下面的值定义相同的颜色：RGB（0,0,255），RGB（0％，0％，100％）。
实例
p
{
background-color:rgb(255,0,0);
}
尝试一下 »
RGBA颜色
RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。
RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。
RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
实例
p
{
background-color:rgba(255,0,0,0.5);
}
HSL颜色
IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。
HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示。
HSL颜色值指定：HSL（色调，饱和度，明度）。
色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的。
实例
p
{
background-color:hsl(120,65%,75%);
}
尝试一下 »
HSLA颜色
HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.
HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。
指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
实例
p
{
background-color:hsla(120,65%,75%,0.3);
}
尝试一下 »
预定义/跨浏览器的颜色名称
147是在HTML和CSS颜色规范预定义的颜色名称。你可以查看我们的预定义颜色名称表。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
如果网页只有一种颜色，那是非常可怕的，颜色的设置丰富了网页，就如同多彩缤纷的世界。
在了解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链接样式
头条创作挑战赛#
【今日HTML小知识-2：设置颜色透明】在网页布局中有时为了网页的整体美观，可能需要将网页中的某些部分设置为背景颜色透明，那么如何设置背景颜色透明呢？本篇文章就来给大家介绍一下设置背景颜色透明的两种方法。
background属性中属性值比较简单，这里就不细说了，opacity属性参数的＂不透明度＂是以数字表示，从 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，换句话说，数字越大代表元素越不透明。代码示例如下：
代码
示例效果
注意：通过backgroud和opacity设置背景颜色透明度，如果背景上面有文字的话，那么文字也会变成透明，就像上面的效果一样。
所谓RGBA颜色，就是RGB三原色加ALPHA。在给背景添加颜色的同时，提供透明度特性。
用法：background:rgba(R, G, B, A) ；
代码实例如下：
代码
示例效果
注意：通过rgba方式设置背景颜色透明度，可以设置背景颜色透明而文字不透明。
以上为HTML设置背景透明色的两种方法，希望能帮助到正在学习HTML的你们噢~~~
新人作者，如有不足地方，希望大家多多交流，随时补充噢~~~
*请认真填写需求信息，我们会在24小时内与您取得联系。
