CSS background深入理解及应用

Background

background属性的简写用法, 常见背景属性的理解以及神奇的渐变色。

目录

background属性的简写用法

常见背景属性介绍

神奇的渐变色

background属性

background简写属性在一个声明中可设置所有的背景属性。

可设置属性如下:

• background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;
• background-position: 设置背景图像的位置;
• background-size: 设置背景图像的大小;
• background-repeat: 指定背景图像的铺排方式;
• background-attachment: 指定背景图像是滚动还是固定;
• background-origin: 设置背景图像显示的原点[background-position相对定位的原点];
• background-clip: 设置背景图像向外剪裁的区域;
• background-color: 指定背景颜色。
  简写的顺序如下:
  bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

顺序并非固定, 但是要注意:
1、background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
2、如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。

代码示例:

background: url("image.png") 10px 20px/100px no-repeat content-box;

background是一个复合属性, 可设置多组属性, 每组属性间使用逗号分隔, 其中背景颜色不能设置多个且只能放在最后一组。

如设置的多组属性背景图像之间存在重叠, 则前面的背景图像会覆盖在后面的背景图像上。

代码示例:

padding: 10px;
background: url("image.png") 0% 0%/60px 60px no-repeat padding-box,
            url("image.png") 40px 10px/110px 110px no-repeat content-box,
            url("image.png") 140px 40px/200px 100px no-repeat content-box #58a;

效果图如下:

常见背景属性

background-position

background-position 属性用来设置背景图像的位置, 默认值: 0% 0%, 效果等同于 left top。

取值说明:
1、 如果设置一个值, 则该值作用在横坐标上, 纵坐标默认为50%(即center) ;
2、 如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标, 取值可以是方位关键字[left\top\center\right\bottom], 如 background-position: left center ; 也可以是百分比或长度, 百分比和长度可为设置为负值, 如: background-position: 10% 30px ;
3、 另外css3支持3个值或者4个值, 注意如果设置3个或4个值, 偏移量前必须有关键字, 如: background-position: right 20px bottom 30px;

示例图如下:

也可以使用 background-position-x 或 background-position-y 来分别设置横坐标或纵坐标的偏移量。

注意: 当使用 background-position-x 以及 background-position-y 时, 需考虑Firefox兼容性的问题。

background-size

background-size属性用来指定背景图像的大小。默认值: auto

取值说明:
1、 可使用长度值或百分比指定背景图像的大小, 值不能为负值。如果设置一个值, 则该值用于定义图像的宽度, 图像的高度为默认值 auto, 根据宽度进行等比例缩放; 如果设置两个值, 则分别作用于图像的宽和高。
2、 auto 默认值, 即图像真实大小。
3、 cover 将背景图像等比缩放到完全覆盖容器, 背景图像有可能超出容器。(即当较短的边等于容器的边时, 停止缩放)
4、 contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等, 背景图像始终被包含在容器内。(即当较长的边等于容器的边时, 停止缩放)

示例图如下(图片: 宽640px 高448px, 容器: 宽200px 高200px):

background-repeat

background-repeat 属性用来设置背景图像铺排填充方式, 默认值: repeat 。

取值说明:
1、repeat-x 表示横向上平铺, 相当于设置两个值 repeat no-reapeat;
2、repeat-y 表示纵向上平铺, 相当于设置两个值 no-repeat repeat;
3、repeat 表示横向纵向上均平铺;
4、no-repeat 表示不平铺;
5、round 表示背景图像自动缩放直到适应且填充满整个容器。 注意: 当设置为 round 时, background-size 的 cover 和 contain 属性失效。
6、space 表示背景图像以相同的间距平铺且填充满整个容器或某个方向. 注意: 当 background-size 设置为 cover 和 contain 时, background-rapeat 的 space 属性失效。

注意, background-repeat 的 round/space 属性, 部分Firefox版本不支持。

示例图:

background-origin

用于设置 background-position 定位时参考的原点, 默认值 padding-box , 另外还有两个值: border-box 和 content-box。

代码示例:

border: 10px solid #58A;
padding: 20px;
background-position: 10px 20px;

示例图:

background-clip

用于指定背景图像向外裁剪的区域, 默认值 border-box , 另外还有两个值: padding-box 和 content-box。

注意: 由于 background-origin 的默认值为 padding-box, 即背景图像 background-image 的默认定位 background-position 参考的原点为 padding区域是[包含padding], 所以为了更好的了解 background-clip 几个属性值的特性, 可将 background-origin 设置为 border-box 。

代码示例:

background-color: #58a;
background-image: url("image.png");
background-repeat: no-repeat;
background-size: 120px 100px;
border: 10px dashed #fb3;
padding: 30px;
background-origin: border-box;

示例图:

渐变图像

在网页设计中, 各种尺寸、颜色、角度的条纹图案无处不在, 下面就来介绍一下如何使用CSS来创建条纹图案。

利用CSS3新增的 linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() 属性, 可实现各种意想不到的渐变图像。

各种渐变效果图:

线性渐变 linear-gradient()

第一个参数: 可不写, 默认值为 to bottom (即180%), 用来指定渐变的方向, 可是是具体的角度值, 也可以直接指定方位 to left/ to right/ to top/ to bottom。

为实现渐变, 还需要至少定义两个颜色结点, 每个颜色节点可由两个参数组成, [颜色值 位置值, 颜色值 位置值, ...], 其中颜色值为必填项, 位置值可为长度, 也可以是百分比, 非必填项。
如: linear-gradient(red 30%, blue 80%); 表示: 容器顶部30%的区域被填充为红色实色, 容器中间50%的高度区域被填充为从红色到蓝色的渐变色, 容器底部20%区域被填充为蓝色实色。

各个参数之间只用逗号分隔。

实现简单的渐变背景

简单渐变示例:

代码示例:

图一: background: linear-gradient(#58a, #fb3);
图二: background: linear-gradient(45deg, #58a, #fb3);
图三: background: linear-gradient(to right, #58a 20%, #fb3 60%);
渐变填充区域为容器中间40%的高度区域, 其他区域填充的颜色为实色。

实现条纹效果

当相邻两个颜色的位置值相同时, 颜色之间会产生无限小的过渡区域。其产生的效果和条纹一样。

效果图:

代码示例:

图一: background: linear-gradient(#58a 50%, #fb3 50%);
图二: background: linear-gradient(#58a 33%, #fb3 33%, #fb3 66%, #e45b5a 66%);
图三: background: linear-gradient(#58a 40%, #fb3 0);

CSS图像(第三版)规范: 如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小, 则该色标的位置值会被设置为它前面所有色标位置值的最大值。

所以上述示例中, 图三第二个颜色的位置值 0 即表示 40%; 图二中代码也可以替换为: linear-gradient(#58a 33%, #fb3 0, #fb3 66%, #e45b5a 0);

实现条纹背景

刚刚已经实现了简单的条纹效果, 接下来实现简单的条纹背景, 这里需要借助 background-size 来控制每一块条纹背景的大小, 并且 background-repeat 应该设置为 repeat。

效果图:

代码示例:

图一:
background: linear-gradient(#58a 50%, #fb3 0);
background-size: 100% 40px;
图二:
background: linear-gradient(to right, #58a 33%, #fb3 0, #fb3 66%, #e45b5a 0);
background-size: 50px 100%;

斜向条纹背景的实现

如果只是简单的设置一个角度, 是不能实现斜向条纹背景的, 如下图所示:

图一将渐变条纹旋转了45度, 图二设置切片大小后进行重复, 并不能实现斜向条纹背景。

代码示例:

图一:
background: linear-gradient(45deg, #58a 50%, #fb3 0);
图二:
background: linear-gradient(45deg, #58a 50%, #fb3 0);
background-size: 50px 50px;

为了实现斜向条纹背景, 联想使用位图生成条纹的方法, 将切片设置称为四条条纹, 如下图所示:

代码示例:

图一:
background: linear-gradient(45deg, #58a 25%, #fb3 0, #fb3 50%, #58a 0, #58a 75% #fb3 0);
图二:
background: linear-gradient(45deg, #58a 25%, #fb3 0, #fb3 50%, #58a 0, #58a 75% #fb3 0);
background-size: 50px 50px;

上述的方法有局限性, 如果想实现30度或者其他角度的斜向条纹, 使用刚刚的方法效果则会很糟糕, 如下图:

background: linear-gradient(30deg, #58a 25%, #fb3 0, #fb3 50%, #58a 0, #58a 75% #fb3 0);

各种角度的斜向条纹

如果想实现各种角度的斜向条纹, CSS3提供了很好的方法, linear-gradient() 的超级版 repeating-linear-gradient() 。

repeating-linear-gradient()

用重复的线性渐变创建图像, 语法与 linear-gradient() 相同。

代码示例:

图一:
background: repeating-linear-gradient(45deg, #58a, #58a 10px, #fb3 0, #fb3 20px);
图二:
background: repeating-linear-gradient(70deg, #58a, #58a 15px, #fb3 0, #fb3 30px, #e45b5a 0, #e45b5a 45px);
图三:
background: repeating-linear-gradient(30deg, #58a, #58a 20px, #fb3 0, #fb3 40px);

使用 repeating-linear-gradient() 的好处是, 不需要借助 background-size 控制大小, 而且角度可以随意设置。

这里需要注意: 使用 repeating-linear-gradient() 实现渐变时, 用法与 linear-gradient() 有一点点不同。repeating-linear-gradient() 必须明确指定每一个颜色的范围值, 而 linear-gradient() 可以适当省略, 详解如下:

如: 实现一个简单的黄蓝渐变, 渐变范围为容器中间60%区域。

效果图:

代码示例:

使用 linear-gradient() 实现(可简写):
background: linear-gradient(#fb3 20%, #58a 80%);
或者:
background: linear-gradient(#fb3, #fb3 20%, #58a 80%);
或者:
background: linear-gradient(#fb3, #fb3 20%, #58a 80%, #58a 100%);

使用 repeating-linear-gradient() 实现(必须写明每一个颜色范围值):
background: repeating-linear-gradient(#fb3, #fb3 20%, #58a 80%, #58a 100%);

其他条纹背景以及缺角背景的实现

效果图:

代码示例:

图一:
background: linear-gradient(0, rgba(200, 0, 0, 0.5) 50%, transparent 0), 
            linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 0);
background-size: 20px;

图二:
background: linear-gradient(0, rgba(200, 0, 0, 0.5) 1px, transparent 0),
            linear-gradient(90deg, rgba(200, 0, 0, 0.5) 1px, transparent 0);
background-size: 20px;

图三:
background: linear-gradient(0, #fff 1px, transparent 0), 
            linear-gradient(90deg, #fff 1px, transparent 0),
            linear-gradient(0, #fff 4px, transparent 0), 
            linear-gradient(90deg, #fff 4px, transparent 0), #58a;
background-size: 20px, 20px, 40px, 40px;

图四:
background: linear-gradient(-125deg, #fff 15px, #58a 0);

图五:
background: linear-gradient(125deg, #fff 15px, #58a 0), 
            linear-gradient(-125deg, #fff 15px, #58a 0);
background-size: 50% 100%;
background-position: left, right;
background-repeat: no-repeat;

图六:
background: linear-gradient(125deg, #fff 15px, #58a 0), 
            linear-gradient(-125deg, #fff 15px, #58a 0),
            linear-gradient(45deg, #fff 15px, #58a 0), 
            linear-gradient(-45deg, #fff 15px, #58a 0);
background-size: 50% 50%;
background-position: top left, top right, bottom left, bottom right;
background-repeat: no-repeat;

径向渐变 radial-gradient()

第一组参数用来指定渐变的类型[shape]、渐变的半径长度[size]、以及圆心的位置[position]。

shape 指定渐变的类型 circle[圆形渐变] 和 ellopse[椭圆形渐变] ;

size 半径长度为具体的长度值, 其中椭圆形渐变的半径长度可以用百分比。

也可以用以下四种指定半径长度:
closest-side：半径长度为从圆心到离圆心最近的边
closest-corner：半径长度为从圆心到离圆心最近的角
farthest-side：半径长度为从圆心到离圆心最远的边
farthest-corner：半径长度为从圆心到离圆心最远的角

position 确定圆心的位置, 值必须跟在 at 后。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center 位置可以是具体的长度也可以是百分比。另外也可以用方位表示。横坐标可取的方位值有left、center、right, 纵坐标可取的方位值有top、center、bottom。

注意: 当渐变类型为 circle[圆形渐变] 时, 只能指定一个size值, 即直径; 当渐变类型为 ellopse[椭圆形渐变] 时, 需要指定两个个size值, 即水平半径, 垂直半径。

为实现渐变, 还需要至少定义两个颜色结点, 每个颜色节点可由两个参数组成, [颜色值 位置值, 颜色值 位置值, ...], 其中颜色值为必填项, 位置值可为长度, 也可以是百分比, 非必填项。

如: radial-gradient(red 30%, blue 80%);

各个参数之间只用逗号分隔。

简单的径向渐变如下图示例:

代码示例:

图一:
background: radial-gradient(#58A, #FB3)
图二:
background: radial-gradient(50px, #58A, #FB3)
图三:
background: radial-gradient(70px, #58A, #FB3, #e45b5a);

图四:
background: radial-gradient(ellipse 50px 70px, #58A, #FB3);
图五:
background: radial-gradient(ellipse 50px 70px at left top, #58A, #FB3);
图六:
background: radial-gradient(ellipse 50px 70px at 60px bottom, #58A, #FB3);

径向渐变实现波点背景

代码示例:

图一:
background: radial-gradient(rgba(200, 0, 0, 0.5) 30%, transparent 0);
background-size: 40px;
图二:
background: radial-gradient(rgba(200, 0, 0, 0.5) 30%, transparent 0),
                  radial-gradient(rgba(200, 0, 0, 0.5) 30%, transparent 0);
background-size: 40px;
background-position: 0 0 , 20px 20px;

repeating-radial-gradient()

用重复的径向渐变创建图像。语法与radial-gradient()相同, 也可以实现一些有意思的效果, 如下图:

background: repeating-radial-gradient(rgba(200, 0, 0, 0.5) 0, rgba(200, 0, 0, 0.5) 20px, transparent 0, transparent 40px);

有关 background 的知识点就先整理到这里，后续还会继续学习，继续补充。如有理解不对的地方，还请各路大神一一指出，多多指教，非常感谢。