转行学前端的第 9 天 : 学习 CSS背景CSS 背景属性用于定义HTML元素的背景。 background-colo

我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。

今日学习目标

昨天对于 CSS 选择器 有一个基础了解，今天准备对于 CSS 背景属性进行一下了解，又是适合学习的一天，加油，小又又！！！！

CSS 背景概要

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

基础说明

background-color 属性定义了元素的背景颜色。

页面的背景颜色使用在body的选择器中。

body {background-color:#b0c4de;}

默认值:	transparent
继承:	no
版本:	CSS1
JavaScript 语法:	object.style.backgroundColor="#00FF00"

示例

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

颜色值定义

值	描述
`color`	指定背景颜色。在 CSS 颜色值近可能的寻找一个颜色值的完整列表。
`transparent`	指定背景颜色应该是透明的。这是默认
`inherit`	指定背景颜色，应该从父元素继承

具体的颜色值可以为

颜色类型	详细说明	举例
十六进制颜色	指定一个十六进制的颜色其组成部分是：`#RRGGBB`，其中`RR`（红色），`GG`（绿色）和`BB`（蓝色）。所有值必须介于`0`和`FF`之间。所有主要浏览器都支持十六进制颜色值。	如："#ff0000"
RGB 颜色	`RGB颜色值`指定：`RGB`（`红`，`绿`，`蓝`）。每个参数（`红色`，`绿色`和`蓝色`）定义`颜色`的亮度，可在`0`和`255`之间，或一个百分比值（从`0%`到`100%`）之间的`整数`。 `RGB颜色值`在所有主要浏览器都支持。	如：`RGB（0,0,255）`，`RGB（0%，0%，100%）`
预定义/跨浏览器的颜色名称	在`HTML`和`CSS`颜色规范预定义的颜色名称，详见下面颜色表图片	如："red"
RGBA 颜色	`RGBA颜色值`是`RGB颜色值` `alpha通道`的延伸 - 指定对象的透明度。 `RGBA颜色值`指定：`RGBA（红，绿，蓝，alpha）`。 `Alpha`参数是一个介于`0.0（完全透明）`和`1.0（完全不透明）`之间的参数。 `RGBA`颜色值被`IE9`, `Firefox3+`, `Chrome`, `Safari`,和`Opera10+`支持。	如："rgba(255,0,0, 1)"
HSL 色彩	HSL 代表`色相`，`饱和度`和`亮度` - 使用`色彩圆柱坐标`表示。 `HSL颜色值`指定：`HSL（色调，饱和度，明度）`。 `色相`是在`色轮`上的程度（从`0`到`360`）-0（或`360`）是红色的，120 是绿色的，240 是蓝色的。`饱和度`是一个百分比值;`0%`意味着`灰色`和`100%`的阴影，是全彩。亮度也是一个百分点;`0%`是黑色的，`100%`是白色的。 `IE9`, `Firefox`, `Chrome`, `Safari`,和`Opera 10+`.支持`HSL颜色值`。	如：`hsl(0, 0%, 20%)`
`HSLA` 颜色	`HSLA`的颜色值是一个带有`alpha`通道的`HSL`颜色值的延伸 - 指定对象的透明度。指定`HSLA`颜色值：`HSLA`（色调，饱和度，亮度，α），α 是 Alpha 参数定义的不透明度。 Alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的参数。 `HSLA颜色值`被`IE9`, `Firefox3+`, `Chrome`, `Safari`,和`Opera10+`.支持.	如：`hsla(0, 0%, 20%, 0.5)`

颜色值好麻烦啊

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

所有主要浏览器都支持background-color属性。

注意 !!!

IE7和更早的版本不支持继承的值。 IE8 需要定义!DOCTYPE。 IE9支持继承。

背景图片

基础说明

background-image 属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

默认值	none
继承	no
版本	CSS1
JavaScript 语法	object.style.backgroundImage="url(stars.gif)"

示例

单个页面背景图片设置示例

body {background-image:url('paper.gif');}

多个页面背景图片设置示例

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

这个效果感觉好酷，同时设置多个图片作为背景图片

属性值

值	说明
`url('URL')`	图像的 URL
`none`	无图像背景会显示。这是默认
`linear-gradient()`	创建一个线性渐变的 "图像"(从上到下)
`radial-gradient()`	用径向渐变创建 "图像"。 (center to edges)
`repeating-linear-gradient()`	创建重复的线性渐变 "图像"。
`repeating-radial-gradient()`	创建重复的径向渐变 "图像"
`inherit`	指定背景图像应该从父元素继承

看了一下 linear-gradient(),radial-gradient(),repeating-linear-gradient(),和repeating-radial-gradient()的说明，感觉有些麻烦，准备之后使用到，再详细研究。

为何背景相关的样式属性都好复杂啊~~~

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

注意 !!!

IE8 及其更早版本不支持一个元素上设置多个背景图片。

背景重复

基础说明

background-repeat设置如何平铺对象的 background-image 属性。

默认情况下，重复background-image的垂直和水平方向。

默认值	repeat
继承	no
版本	CSS1
JavaScript 语法	object.style.backgroundRepeat="repeat-y"

示例

body{background-image:url('paper.gif');background-repeat:repeat-x;}

属性值

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	`background-image`不会重复
inherit	指定`background-repeat`属性设置应该从父元素继承

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

注意 !!!

IE7和更早的版本不支持inherit（继承）的值。 IE8需要定义!DOCTYPE。 IE9支持inherit（继承）。

背景固定

基础说明

默认值	scroll
继承	no
版本	CSS1
JavaScript 语法	object.style.backgroundAttachment="fixed"

示例

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

属性值

值	说明
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 `background-attachment` 的设置应该从父元素继承。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

注意 !!!

Internet Explorer 8 及其更早版本的浏览器不支持多个背景图像在一个元素。

背景定位

基础说明

默认值	0% 0%
继承	no
版本	CSS1
JavaScript 语法	object.style.backgroundPosition="center"

示例

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

属性值

值	说明
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个`关键字`，其他值将会是`center`
`x% y%`	第一个值是`水平`位置，第二个值是`垂直`位置。左上角是`0% 0%`。右下角是`100% 100%`。如果仅指定了一个值，其他值将是`50%`。默认值为：`0% 0%`
`xpos ypos`	第一个值是`水平`位置，第二个值是`垂直`位置。左上角是`0`。单位可以是像素（`0px 0px`）或任何其他 `CSS单位`。如果仅指定了一个值，其他值将是`50%`。你可以混合使用`%`和`positions`
inherit	指定`background-position`属性设置应该从父元素继承

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

注意 !!!

IE8 及更早的浏览器版本不支持一个元素有多个背景图片。

今日学习名词

名称	名词解析
十六进制	（简写为`hex`或下标`16`）在数学中是一种逢`16`进`1`的进位制。一般用数字`0`到`9`和字母`A`到`F`（或`a`~`f`）表示，其中:`A~F`表示`10~15`，这些称作十六进制数字
RGB	`RGB`色彩模式是工业界的一种颜色标准，是通过对红(`R`)、绿(`G`)、蓝(`B`)三个颜色通道的变化，以及它们相互之间的叠加来得到各式各样的颜色的，`RGB`即是代表`红`、`绿`、`蓝`三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。
`CSS1`	`CSS1`指`CSS`（层叠样式表）的第一个版本，它于 1996 年 12 月 17 日成为`W3C`推荐标准，为哈肯·维姆·莱（Håkon Wium Lie）和伯特·波斯（Bert Bos）共同设计而成。该版本中提供了有关文字、颜色、位置和文本属性等基本信息。
W3C	万维网联盟，创建于 1994 年，是`Web`技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，`W3C`已发布了 200 多项影响深远的`Web`技术标准及实施指南，如广为业界采用的超文本标记语言`HTML`（标准通用标记语言下的一个应用）、可扩展标记语言`XML`（标准通用标记语言下的一个子集）以及帮助残障人士有效获得`Web`信息的无障碍指南（`WCAG`）等，有效促进了`Web`技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。
WCAG	`Web内容无障碍指南（WCAG）`涵盖范围广泛，涉及了一些建议，这些建议可使网站内容更容易访问。遵循这些原则，`web`内容更易为广大残疾人士所接受，这些包括`盲人`和`低视患者`、`聋人`和`重听人`、`学习障碍`、`认知障碍`、`行动不便`、`言语残疾`、`光过敏患者`和这些病症的`复合患者`。遵循这些原则也可让`普通用户`更容易访问网站。版本为`WCAG2.0`。
色相	色彩三要素之一，即色彩相貌
色轮	研究颜色相加混合的一种实验仪器
IE	Internet Explorer（简称：IE）是微软公司推出的一款网页浏览器。原称 Microsoft Internet Explorer(6 版本以前)和 Windows Internet Explorer(7、8、9、10、11 版本)，简称 IE。在 IE7 以前，中文直译为“网络探路者”，但在 IE7 以后官方便直接俗称"IE 浏览器"。 2015 年 3 月微软确认将放弃 IE 品牌。转而在 windows 10 上，用 Microsoft Edge 取代了 Internet Explorer。微软于 2015 年 10 月宣布 2016 年 1 月起停止支持老版本 IE 浏览器。 2016 年 1 月 12 日，微软公司宣布于这一天停止对 Internet explorer 8/9/10 三个版本的技术支持，用户将不会再收到任何来自微软官方的 IE 安全更新；作为替代方案，微软建议用户升级到 IE 11 或者改用 Microsoft Edge 浏览器。

今日学习总结

今日心情

今天对于 CSS 背景属性有了一个基础了解，而且学习了很多新名词，感觉好复杂，好多要记得东西，希望明天能更多的学习一下~~~

本文使用 mdnice 排版