css2.1 中,常见的背景属性有以下几种:(经常用到,要记住)
-
background-color:#ff99ff;
设置元素的背景颜色。 -
background-image:url(images/2.gif);
将图像设置为背景。 -
background-repeat: no-repeat;
设置背景图片是否重复及如何重复,默认平铺满。(重要)-
no-repeat
不要平铺; -
repeat-x
横向平铺; -
repeat-y
纵向平铺。
-
-
background-position:center top;
设置背景图片在当前容器中的位置。
在描述属性值的时候,有两种方式:用像素描述、用单词描述。
1、用像素值描述属性值:
格式如下:
background-position:向右偏移量 向下偏移量;
2、用单词描述属性值:
格式如下:
background-position: 描述左右的词 描述上下的词;
- 描述左右的词:left、center、right
- 描述上下的词:top 、center、bottom
比如说,right center
表示将图片放到右边的中间;center center
表示将图片放到正中间。
比如说,bottom
表示图片的底边和父亲底边贴齐(好好理解)。
属性值可以是正数,也可以是负数。比如:100px 200px
、-50px -120px
。
-
background-attachment:scroll;
设置背景图片是否跟着滚动条一起移动。
属性值可以是:scroll
(与fixed属性相反,默认属性)、fixed
(背景就会被固定住,不会被滚动条滚走)。 - 另外还有一个综合属性叫做
background
,它的作用是:将上面的多个属性写在一个声明中。
CSS3 中,新增了一些background属性:
- background-origin
- background-clip 背景裁切
- background-size 调整尺寸
- 渐变:background-image
背景原点:background-origin
属性
background-origin
属性:控制背景从什么地方开始显示。
格式举例:
/* 从 padding-box 内边距开始显示背景图 */
background-origin: padding-box; //默认值
/* 从 border-box 边框开始显示背景图 */
background-origin: border-box;
/* 从 content-box 内容区域开始显示背景图 */
background-origin: content-box;
如果属性值设置成了border-box
,那边框部分也会显示图片哦。
background-clip
属性:设置元素的背景(背景图片或颜色)是否延伸到边框下面
格式举例:
background-clip: content-box;
超出的部分,将裁剪掉。属性值可以是:
-
border-box
超出 border-box 的部分,将裁剪掉 -
padding-box
超出 padding-box 的部分,将裁剪掉 -
content-box
超出 content-box 的部分,将裁剪掉
假设现在有这样的属性设置:
background-origin: border-box;
background-clip: content-box;
上方代码的意思是,背景图片从边框部分开始加载,但是呢,超出内容区域的部分将被裁减掉。
background-size
属性:设置背景图片的尺寸。
格式举例:
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 宽高的百分比(相对于容器的大小) */
background-size: 50% 50%; // 如果两个属性值相同,可以简写成:background-size: 50%;
background-size: 100% auto; //这个属性可以自己试验一下。
/* cover:图片始终填充满容器,且保证长宽比不变。图片如果有超出部分,则超出部分会被隐藏。 */
background-size: cover;
/* contain:将图片完整地显示在容器中,且保证长宽比不变。可能会导致容器的部分区域为空白。 */
background-size: contain;
这里我们对属性值 cover
和 contain
进行再次强调:
-
cover
:图片始终填充满容器,且保证长宽比不变。图片如果有超出部分,则超出部分会被隐藏。 -
contain
:将图片完整地显示在容器中,且保证长宽比不变。可能会导致容器的部分区域留白。
渐变:background-image
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。
渐变分为:
- 线性渐变:沿着某条直线朝一个方向产生渐变效果。
- 径向渐变:从一个中心点开始沿着四周产生渐变效果。
线性渐变
格式:
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
background-image: linear-gradient(to right, yellow, green);
参数解释:
- 方向可以是:
to left
、to right
、to top
、to bottom
、角度30deg
(指的是顺时针方向30°)
径向渐变
格式:
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
background-image: radial-gradient(100px at center,yellow ,green);
解释:围绕中心点做渐变,半径是150px,从黄色到绿色做渐变。
中心点的位置可以是:at left right center bottom top。如果以像素为单位,则中心点参照的是盒子的左上角。