前端入门-css颜色和背景

言

如果网页只有一种颜色，那是非常可怕的，颜色的设置丰富了网页，就如同多彩缤纷的世界。

在了解css颜色之前，我们回顾下计算机是如何显示颜色的？计算机根据色光三原色的原理通过各种算法来显示颜色。

css 颜色 —— color

网页中使用颜色关键字、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可以设置更加漂亮的颜色。

css 背景 —— background

通过background属性可以设置元素的背景色、背景图片，语法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一个声明中设置所有的背景属性，可以在这里设置如下属性：

background-color —— 背景颜色。
background-image —— 使用的背景图像
background-position —— 背景图像的位置
background-size —— 背景图片的大小
background-repeat —— 如何重复背景图像
background-origin —— 背景图片的定位区域
background-clip —— 背景的绘制区域
background-attachment —— 背景图像是否固定或者随着页面的其余部分滚动。

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 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链接样式

众号【传智播客博学谷】回复关键词：前端 PS Java(100G) Python(80G) 大数据区块链测试 PPT JS(40g+300教程) HTML 简历领取相关学习资料！

一、HTML

1、<image>标签上title属性与alt属性的区别是什么？

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》

2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体

加粗：<b>、<strong>

下标：<sub>

居中：<center>

字体：<font>、<basefont>、参考《HTML标签列表》

3、请写出至少5个html5新增的标签，并说明其语义和应用场景

section：定义文档中的一个章节

nav：定义只包含导航链接的章节

header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

参考《HTML5 标签列表》

4、请说说你对标签语义化的理解？

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。

在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

6、你知道多少种Doctype文档类型？

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，

Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

7、HTML与XHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被关闭。

c. 标签名必须用小写字母。

d. XHTML 文档必须拥有根元素。

参考《XHTML 与 HTML 之间的差异》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签（header,nav,footer,aside,article,section）

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件，calendar、date、time、email、url、search

j. 新的技术webworker, websocket等

移除的元素：

a. 纯表现的元素：basefont，big，center, s，strike，tt，u；

b. 对可用性产生负面影响的元素：frame，frameset，noframes；

9、iframe的优缺点？

优点：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点：

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面，不容易管理。

参考《iframe的一些记录》

10、Quirks模式是什么？它和Standards模式有什么区别？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，所以IE6就假定如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：总体会有布局、样式解析和脚本执行三个方面的区别。

a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用

d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

11、请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

参考《为什么说table表格布局不好？》

12、简述一下src与href的区别

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

公众号【传智播客博学谷】回复关键词：前端 PS Java Python 大数据区块链测试 PPT JS HTML 简历领取相关学习资料！

为室内设计师的你

是不是时常对配色感到头疼呢？

觉得配色难或是花费时间大？

今天兰姨来分享几个

好用的色彩搭配网站

大家收藏效果更佳~

https://uigradients.com/

Uigradients是以渐变色彩为主的网站，里面接近上百种渐变配色方案，可根据自己风格来选择搭配，点击左上角，就可以浏览所有的配色图，点击你喜欢的图片就可以查看大图，右上角有免费下载的按钮，选好你喜欢的配色就可以直接下载，还可以分享到你的社交账号。

https://color.adobe.com/zh/

Adobe color 是一家在线色轮，提供RGB、CMYK、LAB、SHB、HEX五种色彩模式，非常人性化，用户可以根据自己的配色要求进行实时搭配，是配色的绝佳去处。

Nipponcolors

Nipponcolors日本传统配色网站，网站直接给出了各种颜色的CMYK值，RGB值，以色卡的形式呈现，当你点击某个颜色的色卡时，整个网页都会变成成你选择的这个颜色，方便我们查看这种颜色是否适合大面积的使用。

http://www.flatuicolorpicker.com/

Flat Design应该是设计师们必不可少的一个网站，这个网站能够进行颜色自动分类。

http://colorhunt.co/

该网站是以四色搭配板块展现的，还可以通过PS拾取色彩信息。

http://www.peise.net

中文的配色网，内有许多色彩知识提供学习。有HEX、RGB、CMYK三种模式，可以下载应用到:Photoshop/AI 网页端:HTML/CSS。

https://www.materialpalette.com/

Material Palette是一款提供Material Design配色的线上工具，它的用法很简单，你只要找出想要搭配的两种颜色，它就会显示出两种颜色搭配在一起的效果预览，并提供你较深或较浅的颜色选项，以及其他你可能会用到的颜色代码。

Coolors

Coolors是一个可以让你简单快速地选色生成工具，为你找出配色的灵感，该网站每次会为你挑选由五种颜色组合而成的调色盘，并显示颜色的代码，你可以快速选取使用，或是锁定其中的几种颜色。

http://zhongguose.com/

这是国内相对较好的色彩搭配网站了，提供RGB和CMYK两种色彩模式，十分有中国特色。

Skala Color

Skala Color是一款为设计师和开发者而生的优质取色工具。这款取色器小巧简洁但功能丰富，适用于OS X系统，支持大量的格式（如十六进制、CSS的RGBA模式或HSL模式、UIColor亦或是NSColor等等），在web、iOS、Android、或OS X开发商都能胜任。

https://colordrop.io/

四宫格配色，点一个就能显示四个的色号，直接复制到ps或者是AI，使用起来非常方便。

http://webgradients.com

这里有很多渐变色的运用，有时候脑袋卡壳了，可以在这里寻找颜色的灵感。

https://color.hailpixel.com/

Color by Hailpixel这个网站可以调整色调、亮度、饱和度等等，使用起来十分便捷。

http://colrd.com/

这个网站可以根据颜色、渐变、调色板等寻找图像资料。

ColorHexa

它能帮助我们扩展这个色彩，搭配出数种方案，甚至还有色盲修正方案。如果你只能确定一个必须使用的颜色，选择这个工具或许能获得一些灵感。

Color Scheme Designer

这是一个在线的配色工具，相比于Adobe color ，它拥有详细的色彩修改方法，和简单的颜色演示工具。国内有个旧版本的汉化版，不过还是建议去官网使用最新的。

LOL Colors

这是一个非常简洁，但非常好用的配色网站，设计师们可以在这里找到很多色彩组合，把鼠标移动到不同颜色的水滴上会提示色彩代码(Hex Code)的颜色值。

Colorfavs

用户只需要把一张图片上传到网站上，系统会自动分析图片里的颜色，并生成色系值，系统根据图片推测你喜欢的色盘搭配。

http://www.colourlovers.com/

色彩社区不仅可以配色，还可以共享他人的色彩，共同切磋学习。

https://brandcolors.net/

该网站总结各企业品牌主打的配色，从里面找寻家居配色灵感也是不错的选择。

今天就分享到这啦，希望以上的配色网站能够激发你们配色灵感，在设计的时候，不再让配色成为你烦恼所在！

该文为原创内容

未经授权不得随意转载

在线咨询

上一篇：超详细直播带货流程，及直播脚本文案模板
下一篇：html页面强制所有链接新窗口打开的方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端入门-css颜色和背景

言

css 颜色 —— color

css 背景 —— background

您的项目需求