欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3中关于新增背景系列background的详解

程序员文章站 2022-04-19 14:50:25
...

1. 回顾一下之前学习过的background属性

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
1.5 background-attchment
1.6 background

2. CSS3新增的background属性

2.1 background-origin
2.2 多重背景
2.3 background-size

1.1 背景颜色属性:background-color

颜色的表示方法有3种:单词、rgb表示法、十六进制表示法

1. 单词: 能够用单词来表述的,都是简单颜色

2. rgb表示法

rgb表示三原色“红”red、“绿”green、“蓝”blue 。
光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。

用逗号隔开,r、g、b的值,每个值的取值范围0~255,一共256个值

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

黑色:(光学显示器,每个元件都不发光,黑色)
background-color: rgb(0,0,0);

3. 十六进制表示法

所有用#开头的值,都是16进制的。

红色:
background-color: #ff0000;

16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);

补充:
十进制中的基本数字(一共10个):0、1、2、3、4、5、6、7、8、9
十六进制中的基本数字(一共16个):0、1、2、3、4、5、6、7、8、9、a、b、c、d、d、e、f

十六进制中,13 这个数字表示什么?
表示1个16和3个1。 那就是19。 这就是位权的概念,开头这位表示多少个16,末尾这位表示多少个1。

1.2 background-image

用于给盒子加上背景图片。背景天生是会被铺满的。

background:url(images/1.jpg);

1.3 background-repeat

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

background-repeat:no-repeat; 不重复 background-repeat:repeat-x; 横向重复 background-repeat:repeat-y; 纵向重复

1.4 background-position

背景定位属性

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

用单词描述:

描述左右的词: left、 center、right
描述上下的词: top 、center、bottom

右下角:background-position: right bottom;

1.5 背景图片是否滚动(background-attchment)

scroll:滚动。默认值 fixed:固定。不会随着滚动条的滚动而滚动 local

1.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;

如果盒子又有背景图片,又有背景颜色。实际上以显示图片为主,富裕的地方,用颜色填充。

background: blue url(images/*fan.jpg) no-repeat 100px 100px;

2.1 背景图片的基准点(background-origin)

border-box: 忽略边框,直接从边框的起始0,0点开始平铺 padding-box:默认值,忽略padding,直接从padding的起始0,0点开始平铺 content-box:从内容部分开始平铺,会预留出padding的位置。所以说padding会对它造成影响

2.2 多重背景

CSS3-新增背景系列background。背景图片之间用逗号隔开,可以写多组,最先渲染的图片有可能会遮住后面渲染的图片。

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 控制背景图片的大小(background-size)

background-size:值

取值:

**长度值**px 百分比:以盒子宽度为参照 auto:背景图片的真实大小

contain完全显示(当图片的宽度或是高度在缩放的时候有一个“碰到“了盒子的边缘,则停止变化)

cover完全铺满(将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器)

当只有一个值,如宽度实现拉伸,高度会默认auto,保持等比例。
当有两个值,宽度和高度会分别拉伸到对应的值,可能会变形。

以上就是CSS3中关于新增背景系列background的详解的详细内容,更多请关注其它相关文章!