css颜色跟背景总结（内含实例及截图）

目录

1. css颜色表示
   1.1 命名颜色
   1.2 RGB颜色表示法
   1.3 十六进制颜色制
   1.4 rgba
2. 有关背景相关属性
   2.1 背景颜色
   2.2 背景图
   2.3 图像重复background-repeat属性
   2.4 背景图像位置background-position属性
   2.5 Background-attachment背景附件属性
   2.6 背景连写
   2.7 多背景

1.css颜色表示

1.1 命名颜色

直接采用某个颜色的英文单词命名
-transparent 透明色
-red，black…

 p { color: red; }

1.2 RGB颜色表示法

-RGB模式表示色彩，R:red，G：green，B：blue，三种颜色组合叠加可以产生自然界中所有的颜色，也是计算机常用模式
-RGB颜色值是这样规定的：rgb|(red,green,blue),
-每个参数(red,green,以及blue)定义颜色的强度，可以是介于0与255之间的整数，或者是百分比值（从0%到100%）

p {color: rgb(255,255,0);}
p {color: rgb(100%,100%,0%);}

1.3 十六进制颜色制

-由于RGB模式书写非常不方便，三个255值直接用3个十六进制数表示
-十六进制颜色是这样规定的：#RRGGBB，其中的RR（红色），GG（绿色），BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于0到FF之间
-取值范围#000000~#FFFFFF（黑色到白色）
-其实就是RGB模式的另外一种写法，所有浏览器都兼容
-p {color:#c0c0c0;} p{ color:#09;} 三个数字的复制扩展成六个 #c09=>#cc0099

1.4 rgba

a:表示alpha 透明的意思 ，a的取值范, 围0-1,0为透明1是不透明，也能简写.2 .3

color: rgba(122, 111,22, 0.2);

2. 有关背景相关属性

2.1 背景颜色

Background-color：对指定元素设置背景颜色

2.2 背景图

Background-image：对指定元素设置背景图像

格式：

background-image: url(../../../imgs/gift.gif);

2.3 图像重复background-repeat属性

Background-repeat： repeat | no-repeat | repeat-x | repeat-y
Repeat-x:水平方向填充
Repeat-y:垂直方向填充
No-repeat：取消平铺
默认或者属性值为repeat情况下为平铺

例：这里有一张背景图，默认情况下如图：

width: 200px;
            height: 200px;
            border: 1px solid red;
            background-image: url(../imgs/gift.gif);

此时加入：

background-repeat: no-repeat;

改成X方向时

background-repeat: repeat-x;

改成Y方向时

background-repeat: repeat-y;

2.4 背景图像位置background-position属性

基本语法：
Background-position： 参数1 参数2;
属性值说明：
Left|center|right|top|bottom ：五个位置 如果仅仅规定一个值，则另外一个值为center

X% y% :水平位置和垂直位置，左上角是0% 0%，如果仅仅规定了一个值，另一个值将是50%
Xpos ypos:同上左上角为0 0
注意：背景不占位置

2.5 Background-attachment背景附件属性

设置背景图片是否随滚动条一起滚动

基本语法：
Background-attachment： scroll | fixed

语法说明：
Scroll：表示文字页面滚动时，背景附件一起滚动
Fixed：表示文字页面滚动时，背景附件固定不滚动

2.6 背景连写

基本语法：
Background：background-color background-image background-repeat background-position
Background-attachment
注意：无顺序要求，且保证background-image属性值存在即可

url(../../../imgs/google.png) no-repeat 500px 0;

2.7 多背景

用途：当背景需要放多个背景图或者还加颜色时

语法：

background:
url(图片位置) repeat | no-repeat | repeat-x | repeat-y x坐标 y坐标,
url(图片位置) repeat | no-repeat | repeat-x | repeat-y x坐标 y坐标,
url(图片位置) repeat | no-repeat | repeat-x | repeat-y x坐标 y坐标 颜色;
/* 注意：如果设置多背景时还需要放背景颜色，背景颜色一定要放在后面 */
每一块用逗号隔开

例子：

 background:
            url(../../../imgs/google.png) no-repeat 500px 0,
            url(../../../imgs/css第三天.JPG) no-repeat,
            url(../../../imgs/baby.jpg) no-repeat pink;

效果：