一、背景属性概述

CSS 中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观。 CSS 中通过 background 属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。

二、背景颜色 background-colorbackground-color

属性名：background-color
作用：在盒子区域添加背景颜色的修饰。
加载区域：在 border 及以内加载背景颜色。
属性值：颜色名、颜色值。

三、背景图片 background-image

属性名：background-image 作用：给盒子添加图片的背景修饰。加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始。属性值：url(图片路径) url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。

通过如上示例，我们看到加载的图片重复显示了，如何改变显示样式呢？

四、背景重复 background-repeat

属性名：background-repeat 作用：设置添加的背景图是否要在盒子中重复进行加载。根据属性值不同，有四种重复加载方式。该属性要和background-image属性同时使用，如果没有设置background-image属性则background-repeat属性将无效。

（1）repeat属性值（默认值：重复）

（2）no-repeat属性值（不重复）

注意：如果图片不重复，从 border 以内开始加载。

背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。从 order 以内开始加载。

（3）repeat-x属性值（水平方向重复）

（4）repeat-y属性值（垂直方向重复）

五、背景定位 background-position

属性名：background-position 作用：主要用于设置不重复的图片在背景区域的加载开始位置。属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔。第一个属性值：表示背景图片在水平方向的位置。第二个属性值：表示背景图片在垂直方向的位置。

5.1单词表示法

属性值都是使用代表方向的单词进行书写。水平方向可选单词：left、center、right 垂直方向可选单词：top、center、bottom 单词表示图片与盒子背景区域进行对应方向的对齐。

5.2像素表示法

使用像素值作为背景定位的属性值。第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。第二个属性值：像素是几，表示背景图片左上角针对 border以内的左上顶点垂直方向位移的距离。注：图片的左上角是（0，0）原点。

探讨：前端坐标系和数学坐标系的区别？

前端坐标系：向右向下是正，向左向上是负。

数学坐标系：向右向上是正，向左向下是负。

像素值区分正负，正负代表位移方向不同：正数：表示图片针对盒子的原点向右、向下移动。负数：表示图片针对盒子的原点向左、向上移动。

注:可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分。制作方法，需要使用 FW 软件量取尺寸，读取数据。

第一步：在设计图中，使用切片工具制作一个想要显示区域大小的切片，让切片左上顶点位于想要加载的背景部分。

第二步：读取属性栏的切片数据，其中宽、高就是要加载的盒子的宽高，x 和 y 的数值表示移动的距离的绝对值，直接将数值加负号赋值给背景定位属性。二步：读取属的切片数据，其中宽、高是要加载的盒子的宽高，动的距离的绝对值，直接将数值加负号赋值给背

5.3百分比表示法

百分比表示法使用百分比数字作为属性值。 100%代表的数值：水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。

六、背景附着 background-attachment

属性名：background-attachment

作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。

属性值：

七、background属性的综合写法

background 属性可以将五个单一属性的值进行合写。属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。

示例1：颠倒书写顺序不会影响样式效果

示例2：颠倒background-position背景定位

建议按照如下规范书写：

background: url(images/bg4.jpg) no-repeat center top fixed #ccc;

八、background属性的综合写法的注意事项

注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。

注意2：如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。

示例1：我们可以看到，如果不使用单一属性会导致只有背景颜色生效，其他的被层叠成默认样式了，因为我们使用的是background综合属性去书写的。

示例2：我们可以看到，如果使用单一属性会只是单独改变一种样式，其他的不会被层叠掉。

作用：在盒子区域添加背景颜载区域：在 border 及以内加载背景颜色。色名、颜色值。

（15）css常用样式—background背景属性相关推荐

CSS 中的 background 背景属性命令大全
1.background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. 属性值说明 scroll 背景图片随页面的其余部分滚动.这是默认 fixed 背景图像是固定的 in ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
CSS常用样式属性有哪些？代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构创建DIV <div class="div1">1 </div> 样式 widt ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
1-2 CSS常用样式笔记
文章目录 CSS常用样式字体属性文本属性盒模型属性宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用清除默认样式高度height应 ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层头部:header --用于头部主要内容:mai ...
background 背景属性详解
background 背景属性我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

（15）css常用样式—background背景属性