CSS-背景和符号属性

2022-12-15

CSS背景属性概述

在当今的HTML页面中，页面的背景色默认为“白色”，除了少许的表单元素及HTML5规范后才出现的一些新的“功能性”元素标签，其它元素是不具有背景色的（也可以理解为透明的）。要为页面内的元素添加漂亮的“装饰”，让页面表现得更加丰富，区别于人，除了“border”、“outline”、“box-shadow”外，“background”在里面也扮演着相当重要的角色，本章的主要内容就是围绕“background”这个属性进行的。

能让元素背景产生视觉效果的主要有：背景色、背景图片和背景渐变，而本章中出现的其它属性都是对它们进行“辅助控制”的，其中“背景图片”和“背景渐变”都属于同一个属性“background-image”，所以他们在同一个元素内不能共存，当可以通过细节上的控制让这个属性能同时显示出背景图片和渐变色。

背景颜色 “background-color”

该分支属性可以称得上是该类属性使用率最高的属性，是用于设置任何显示类型（display）元素的背景颜色，可以使用的颜色为Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。

背景图片 “background-image”

background-image:url("图片地址")；

作为“background”的一个重要分支属性，在HTML的美化设计中也占据到相当重要的作用，特别是在CSS3版本发布之前“background-image”这一属性在页面的美化中可以说有着非常核心的地位，但在CSS3版本发布之后，该属性在页面美化中的比重开始下降，页面的加载速度也得到了不少的提升。但要用CSS3或者HTML的“canvas”技术去实现复杂的图像终究比较困难，所以在很多Web应用场景中“background-image”仍然扮演着非常重要的角色。

在实际运用的过程中需要注意的是背景图片“background-image”是可以和背景色“background-color”共存的，也就是当采用一张“非矩形”的“png图片”作为背景图片时要小心背景色带来的意外影响。

同一个“bakcground-image”属性是可以存在多张背景图片的。而示例中的诸如0、xx像素和no-repeat这些其它的“background”分支属性的值只是为了让那四张图片可以独立呈现。当然我们也可以不需要那些值，而直接在一个“background-image”属性中设置多张图片，但是需要注意，先设置的背景图片在显示“层级”更高，而后设置的背景图图片的“层级”会越低，

对于单个元素设置多个背景图片的 CSS 设置需要提醒的是，对于同一个元素切忌不要出现两个同样的 CSS 属性，否则后面的一定会覆盖之前的，从而达不到设置多背景图片的效果。当然对于单个元素通过“background-image”属性设置的图片数量没有显示，只是需要注意设置顺序即可，防止图片间出现遮挡。对于同个元素需要进行多个带有透明度图像的“叠加显示”，需要将它们都转换为 png 格式（质量和颜色数较高）的图片或者 gif 格式（质量和颜色数较低）的图片，而不是 jpg/jpeg 的图片，因为这种格式不支持透明通道。

对于很多初学者而言，总是容易遇到这样一个问题：即什么时候该选用 HTML 的<img>标签，什么时候又该选用 CSS 的 background-image 属性来显示网页中的图片。应主要从以下几个点进行区别分析：

图片标签<img>是个无内容单标签，是个独立的个体；而“background-image”属性可以为几乎所有可以设置尺寸的“容器类”元素所用，包括表单输入框、<button>按钮等

通常<img>标签是作为内容来呈现的；而“background-image”属性更多时候的作用是装饰点缀

页面上经常修改的，或是可以通过JavaScript手段动态加载的最好使用<img>标签；而那些在页面上长久都不用变的就可以使用“background-image”属性，毕竟JavaScript在操作HTML上会比操作CSS文件简单灵活得多

使用<img>标签呈现图片无需设置标签宽高；而使用“background-image”属性需要保证当前元素具有适当的宽高，宽高都为0像素的元素，背景图片自然也不可见

使用<img>标签设置的图片路径是相对于当前HTML页面的位置而言的；而使用“background-image”属性设置的图片路径则是相对于当前CSS文件而言的

使用<img>标签只能对图片的宽高进行设置；而使用“background-image”属性可以让图片重复平铺，设置大小、位置、裁切、填充方式、固定背景等，在图片呈现上更为灵活，但是其中CSS3部分的分支属性不能被老版本浏览器支持，存在兼容性风险

这两种方式可以使用的图片格式是一样的，只要<img>标签能够显示的图片“background-image”属性也能显示

这两种方式使用的图片都可以被浏览器缓存，而不需要用户在二次访问页面时重新从服务器加载

当然，只要随着开发经验的不断增加就会发

背景重复方式 “background-repeat”

当一张背景图片宽或高小于其元素容器，或用“background-size”（后面会讲到）设置宽高小于元素容器的宽高时，背景图片默认会以“平铺”的方式排满整个元素的背景，而该属性正式用于控制图像重复排列方式的，它有以下值：

repeat: 默认，以“平铺”的方式排列图片
repeat-x: 只在水平方向（X轴方向）进行重复
repeat-y: 只在垂直方向（Y轴方向）进行重复
no-repeat: 使背景图片不重复

背景图定位“background-position”

该属性用于设置背景图片在元素内出现的位置。使用这个属性主要分为两类实际情况：第一类情况就是元素的宽高大于背景图片时，这个时候是通过“0”或“正数值”去进行定位；第二类情况就是元素的宽高小于背景图片的宽高时，这个时候是通过“0”或“负数值”去进行定位，这是采用“CSS图片精灵（CSS Sprites）”技术来开发项目的时候必用的属性，可以利用一些线上 CSS Sprites 工具来快速生成。

该属性的值有三种形式：

方位英文单词: 可以有“left”、“right”、“top”、“bottom”和“center”。用法如：“left top”（默认），设置背景图在元素内的“左上方”；“right bottom”，设置背景图在元素内的“右下方”；“center center”，设置背景图在元素的“中心”。
百分比单位: 用法如：“0% 50%”，设置背景图在元素内“水平方向”的“左方”，垂直方向的“中心”；“50% 50%”，设置背景图在元素内的“中心”；“100% 100%”，设置背景图在元素内的“右下方”。
像素单位: 背景图的“左上角”相对于元素“左上角”偏移的距离，如“10px 20px”，设置背景图“水平向右”偏移10像素，“垂直向下”偏移20像素。

这三种形式去设置背景图片的位置是可以“混搭”的，如：“left 100%”、“50% 70px”、“top 30px”等。不过从代码规范性的角度出发，并不推荐这种“混搭”的方式。

背景图固定“background-attachment”

通过将该属性的值设置为“fixed”后，页面出现滚动条后就算页面滚动，背景图也会固定在原来的位置不会跟随页面滚动。它的默认值是“scroll”，是当页面滚动的时候，背景图也跟随页面同步滚动。

背景裁切范围“background-clip”

该属性是规定背景颜色显示的范围到什么地方被裁切，有以下三种方式：

border-box: 默认值。背景的填充范围包括到“border”部分
padding-box: 背景在“padding”以外的部分会被裁切
content-box: 背景在“content”以外的部分会被裁切

该属性和“background-clip”的使用方式十分相似，同样是也拥有它的三个值。但是它不能对背景颜色的填充进行控制，只能对“背景图片”和本章马上就会接触到的“背景渐变”生效。但是它在处理背景图片的填充上也有些不合预期的地方，我们可以来看看下面这个示例。

背景图大小“background-size”

该属性用于设置背景图片的大小，主要可以通过四种类型的单位设置：

像素值: 可以通过像素“px”精确地设置背景图片的大小。需要设置为两个值，第一个值表示背景图的宽度，第二个值表示背景图的高度，还可以通过设置宽度或高度的其中一个，将另外一个值设置成“auto”达到保持背景图原始图像比例的效果。如：“240px 120px”、“180px auto”或“auto（相当于还原默认的大小）”。
百分比值: 用“百分比”作为值，结构和用“像素值”一致，也是两个值，第一个值是相对于元素宽度的百分比值，第二个值是相对于元素高度的百分比。如：“100% 80%”、“100% auto”或“auto 50%”。
contain: 自动将背景图像填满元素的其中一边，图像的比例保持不变。
cover: 在保持图像原始比例的情况下，将元素的背景区域完全覆盖，超出元素宽高的部分会自动被裁剪，是一种比较“智能”的背景图片大小设置方式，通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。