css详解background八大属性及其含义
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css详解background八大属性及其含义，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4711字，纯文字阅读大概需要7分钟。
内容图文
以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。
background（背景）
以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。
从2D视角看盒模型示意图：
从3D视角看盒模型示意图：
从3D视角看盒模型可以发现多了两个属性：background-image和background-color，而这两个属性都可以归纳到元素的background中，同时在元素的background中还有6个属性[1]可以影响到background-image和background-color的绘制情况，这篇博文主要是用来介绍background-image和background-color还有其余6个属性以及它们是怎样影响到浏览器对元素盒子background的绘制的。
background-color（背景颜色）
背景颜色是背景中最常用的属性，它支持的值类型有：
| 类型 | 示例 |
|---|---|
| 颜色名称 | red, white, black, transparent |
| 16进制颜色码 | #FF0000, #FFF, #000, #00000000 |
| rgb颜色值 | rgb(255, 0, 0), rgb(255, 255, 255), rgb(0, 0, 0) |
| rgba颜色值 | rgba(0, 0, 0, 0) |
| hsla颜色值 | hsla(0,0%,0%,0) |
关于rgba颜色值和hsla颜色值，笔者在有趣的css—隐藏元素的7种思路中写过详细的使用示例，感兴趣的读者可以看看。
background-color（背景颜色）示例html代码：
background-color（背景颜色）示例
background-color（背景颜色）示例效果图：
background-image（背景图片）
背景图片的书写示例：
background-image: url(path);
path代表存放图片的路径，它可以是绝对路径，也可以是相对路径。
背景图片在z轴上比背景颜色更靠近用户，背景图片在完全不透明的情况下，会完全遮盖住背景颜色。
background-image（背景图片）示例html代码：
background-image（背景图片）示例
background-image（背景图片）示例效果图：
background-size（背景图片尺寸大小）
背景图片尺寸大小支持的值类型有：
| 类型 | 示例 | 含义 |
|---|---|---|
| 百分比 | 20% 30% | 背景图片占据背景区宽度的百分之20，高度的百分之30 |
| 像素 | 200px 300px | 背景图片的宽度为200像素，高度为300像素 |
| 覆盖 | cover | 保持图片宽高比进行拉伸，使其完全占据背景区 |
| 包含 | contain | 保持图片宽高比进行缩放，使其恰好适合背景区 |
background-size（背景图片尺寸大小）示例html代码：
background-size（背景图片尺寸大小）示例
background-size（背景图片尺寸大小）示例效果图：
background-repeat（背景图片重复方式）
背景图片重复方式支持的值以及含义:
| 值 | 含义 |
|---|---|
| no-repeat | 背景图片不重复 |
| repeat | 默认值，背景图片在垂直和水平方向都重复 |
| repeat-x | 背景图片在水平方向重复 |
| repeat-y | 背景图片在垂直方向重复 |
background-repeat（背景图片重复方式）示例html代码：
background-repeat（背景图片重复方式）示例
background-repeat（背景图片重复方式）示例效果图：
background-position（背景图片位置）
background-position总共有5个属性，分别是top、right、bottom、left、center，这个5个属性可以单独使用，也可以两两使用。
单独使用时，默认第二个参数为center，两两使用时背景图片占据位置如下图：
background-position（背景图片位置）示例html代码：
background-position（背景图片位置）示例
background-position（背景图片位置）示例效果图：
background-attachment（背景图片是否固定）
背景图片是否固定支持的值以及含义:
| 值 | 含义 |
|---|---|
| scroll | 默认值，背景图片不固定，在视窗内滚动元素时，背景图片跟随元素一起滚动 |
| fixed | 背景图片固定，在视窗内滚动元素时，背景图片不跟随元素一起滚动 |
背景图片不固定示例html代码：
背景图片不固定示例1 Fatman2 Fatman3 Fatman4 Fatman5 Fatman6 Fatman7 Fatman8 Fatman
背景图片不固定示例效果图：
背景图片固定示例html代码：
背景图片固定示例1 Fatman2 Fatman3 Fatman4 Fatman5 Fatman6 Fatman7 Fatman8 Fatman
背景图片固定示例效果图：
background-clip（背景裁剪）
| 值 | 含义 |
|---|---|
| border-box | 背景（图片+颜色）占据盒模型的 border+padding+content 3个区域 |
| padding-box | 背景（图片+颜色）占据盒模型的 padding+content 2个区域 |
| content-box | 背景（图片+颜色）占据盒模型的 content 1个区域 |
注:设置background-clip:border-box时需要让元素边框完全透明或部分透明，否则边框样式会完全遮盖住background-clip:border-box的效果。
background-clip（背景裁剪）示例html代码：
background-clip（背景裁剪）示例
background-clip（背景裁剪）示例效果图：
background-origin（背景图片定位参考系）
笔者在css详解position五种属性用法及其含义中提到过相对定位参考系是其在常规流中的位置，绝对定位的参考系是离其最近的定位祖先元素，固定定位的参考系是视窗。
background-position的定位参考系就与background-origin有关:
| 值 | 含义 |
|---|---|
| border-box | 背景图片相对于元素border区域进行定位 |
| padding-box | 背景图片相对于元素padding区域进行定位 |
| content-box | 背景图片相对于元素content区域进行定位 |
注：background-clip控制背景（图片+颜色）裁剪的区域，是将背景（图片+颜色）根据设置的属性值裁剪掉；而background-origin控制背景（图片）定位时使用的参考系，它在不同属性值切换下影响的表现效果是背景图片随着属性值改动带来的背景（图片）扩大或缩放。
background-origin（背景图片定位参考系）示例html代码：
background-origin（背景图片定位参考系）示例
background-origin（背景图片定位参考系）示例效果图：
尾言
笔者才疏学浅，慌忙之下难免有遗漏或是疏忽，如有错误之处，还望各位看官不吝赐教，笔者在此感谢。
内容总结
以上是互联网集市为您收集整理的css详解background八大属性及其含义全部内容，希望文章能够帮你解决css详解background八大属性及其含义所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。