前端开发 \ CSS \ CSS——bacground系列属性

CSS——bacground系列属性

总点击138
简介:1、background-color属性背景颜色属性,表示颜色的方法有三种:单词,rgb表示法,十六进制表示法

1、background-color 属性

背景颜色属性,表示颜色的方法有三种:单词,rgb表示法,十六进制表示法

(1)能够用英语单词表述的颜色都是简单颜色。

例如:

红色 :       background-color: red; 

黄色 :       background-color: yellow;

(2)rgb表示法

rgb表示三原色“红”red、“绿”green、“蓝”blue。

r、g、b,每个值取值范围0~255,一共256个值。

如果其中一个值为255,另外两个为0,那么就说明是纯色,三个值相等是灰色:

红色 :       background-color:rgb(255,0); 

绿色 :       background-color:rgb(0,255,0);

蓝色:        background-color:rgb(0,255);

黑色:        background-color:rgb(0,0);

白色:        background-color:rgb(255,255);

灰色:        background-color:rgb(111,111,111);   值越大,灰色越浅。

(3)十六进制表示法

红色:    background-color: #ff0000;

所有用#开头的值,都是十六进制的。1十六进制表示法,也是两位两位看,看r、g、b,但是没逗号隔开。

#ff0000     中ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0);

16进制中基本数字(一共16个):

0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

background-color: #123456;

等价于:

 background-color: rgb(18,52,86);

 任何一种十六进制表示法,都能换算成为rgb表示法。也就是说,两个表示法的颜色数量,一样

十六进制可简化为3位,所有#aabbcc的形式的,都能简化为#abc;

比如:

 background-color:#ff00ff;

等价于

 background-color:#f0f;

 比如:

 background-color:#112233;

等价于

 background-color:#123;

要记住:

1 #000   黑

2 #fff    白

3 #f00   红     #0f0   绿    #00f   蓝

4 #333   灰

5 #222   深灰

6 #ccc   浅灰

2、 background-image属性

用于给盒子加背景图片,语句:background-image:url(images/1.jpg);

url()表示网址,uniform resouces locator 同意资源定位符;images/1.jpg 就是相对路径。

背景默认平铺满盒子的。padding区域有背景图。

3、background-repeat属性

设置背景图是否重复,以及重复方式。

background-repeat:no-repeat;   不重复

background-repeat:repeat-x;    横向重复

background-repeat:repeat-y;    纵向重复

4、background-position属性

背景定位属性

background-position: 描述左右的词儿  描述上下的词儿;

描述左右的词儿: left、 center、right

描述上下的词儿: top 、center、bottom

1) 大背景图居中

2) 通栏banner      语句:background-position: center top;

background-position:向右移动量 向下移动量;   

移动量可以是负数。比如,向左移动120px,就相当于向右移动-120px;向上移动150px,就相当于向下移动-150px。

通常用来做“css精灵”,利用css的背景定位来显示需要显示的图片部分。

5、background-attachment属性

背景是否固定。

 background-attachment:fixed;

背景就会被固定住,不会被滚动条滚走。

6、background综合属性

background属性和border一样,是一个综合属性: background: red url(1.jpg) no-repeat 100px 100px fixed;

等价于:


 background-color:red;

 background-image:url(1.jpg);

 background-repeat:no-repeat;

 background-position:100px 100px;

 background-attachment:fixed;

可任意省略部分:

 background: red;

意见反馈 常见问题 官方微信 返回顶部