css详解background八大属性及其含义
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代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>background-color（背景颜色）示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 420px;
height: 320px;
background-color: #06b7e1;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-color（背景颜色）示例效果图：
background-image（背景图片）
背景图片的书写示例：
background-image: url(path);
path代表存放图片的路径，它可以是绝对路径，也可以是相对路径。
背景图片在z轴上比背景颜色更靠近用户，背景图片在完全不透明的情况下，会完全遮盖住背景颜色。
background-image（背景图片）示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title> background-image（背景图片）示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 420px;
height: 320px;
background-color: #06b7e1;
background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-image（背景图片）示例效果图：
background-size（背景图片尺寸大小）
背景图片尺寸大小支持的值类型有：
| 类型 | 示例 | 含义 |
|---|---|---|
| 百分比 | 20% 30% | 背景图片占据背景区宽度的百分之20，高度的百分之30 |
| 像素 | 200px 300px | 背景图片的宽度为200像素，高度为300像素 |
| 覆盖 | cover | 保持图片宽高比进行拉伸，使其完全占据背景区 |
| 包含 | contain | 保持图片宽高比进行缩放，使其恰好适合背景区 |
background-size（背景图片尺寸大小）示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>background-size（背景图片尺寸大小）示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 420px;
height: 320px;
margin: 24px;
background-color: #06b7e1;
background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
}
#percentage {
background-size: 20% 30%;
}
#pixel {
background-size: 200px 300px;
}
#cover {
background-size: cover;
}
#contain {
background-size: contain;
}
</style>
</head>
<body>
<div id="percentage"></div>
<div id="pixel"></div>
<div id="cover"></div>
<div id="contain"></div>
</body>
</html>
background-size（背景图片尺寸大小）示例效果图：
background-repeat（背景图片重复方式）
背景图片重复方式支持的值以及含义:
| 值 | 含义 |
|---|---|
| no-repeat | 背景图片不重复 |
| repeat | 默认值，背景图片在垂直和水平方向都重复 |
| repeat-x | 背景图片在水平方向重复 |
| repeat-y | 背景图片在垂直方向重复 |
background-repeat（背景图片重复方式）示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>background-repeat（背景图片重复方式）示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 420px;
height: 320px;
margin: 24px;
background-color: #06b7e1;
background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
background-size: 42px 32px;
}
</style>
</head>
<body>
<div style="background-repeat: no-repeat;"></div>
<div style="background-repeat: repeat;"></div>
<div style="background-repeat: repeat-x;"></div>
<div style="background-repeat: repeat-y;"></div>
</body>
</html>
background-repeat（背景图片重复方式）示例效果图：
background-position（背景图片位置）
background-position总共有5个属性，分别是top、right、bottom、left、center，这个5个属性可以单独使用，也可以两两使用。
单独使用时，默认第二个参数为center，两两使用时背景图片占据位置如下图：
background-position（背景图片位置）示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>background-position（背景图片位置）示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 420px;
height: 320px;
margin: 24px;
background-color: #06b7e1;
background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
background-size: 140px 140px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div style="background-position: top;"></div>
<div style="background-position: right;"></div>
<div style="background-position: bottom center;"></div>
<div style="background-position: left center;"></div>
</body>
</html>
background-position（背景图片位置）示例效果图：
background-attachment（背景图片是否固定）
背景图片是否固定支持的值以及含义:
| 值 | 含义 |
|---|---|
| scroll | 默认值，背景图片不固定，在视窗内滚动元素时，背景图片跟随元素一起滚动 |
| fixed | 背景图片固定，在视窗内滚动元素时，背景图片不跟随元素一起滚动 |
背景图片不固定示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>背景图片不固定示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 100%;
height: 2000px;
margin: 24px;
background-color: #06b7e1;
background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
background-size: 140px 140px;
background-repeat: repeat;
background-attachment: scroll;
}
p {
font-size: 64px;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<div>
<p>1 Fatman</p>
<p>2 Fatman</p>
<p>3 Fatman</p>
<p>4 Fatman</p>
<p>5 Fatman</p>
<p>6 Fatman</p>
<p>7 Fatman</p>
<p>8 Fatman</p>
</div>
</body>
</html>
背景图片不固定示例效果图：
背景图片固定示例html代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>背景图片固定示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 100%;
height: 2000px;
margin: 24px;
background-color: #06b7e1;
background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
background-size: 140px 140px;
background-repeat: repeat;
background-attachment: fixed;
}
p {
font-size: 64px;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<div>
<p>1 Fatman</p>
<p>2 Fatman</p>
<p>3 Fatman</p>
<p>4 Fatman</p>
<p>5 Fatman</p>
<p>6 Fatman</p>
<p>7 Fatman</p>
<p>8 Fatman</p>
</div>
</body>
</html>
背景图片固定示例效果图：
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代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>background-clip（背景裁剪）示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 420px;
height: 320px;
margin: 24px;
border: 32px dotted black;
padding: 32px;
background-color: #06b7e1;
background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div style="background-clip: border-box;"></div>
<div style="background-clip: padding-box;"></div>
<div style="background-clip: content-box;"></div>
</body>
</html>
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代码：
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>background-origin（背景图片定位参考系）示例</title>
<style type="text/css">
body {
margin: 24px;
padding: 24px;
border: 1px solid black;
}
div {
width: 420px;
height: 320px;
margin: 24px;
border: 32px dotted black;
padding: 32px;
background-color: #06b7e1;
background-image: url(https://img-blog.csdnimg.cn/20210414230229207.png);
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div style="background-origin: border-box;"></div>
<div style="background-origin: padding-box;"></div>
<div style="background-origin: content-box;"></div>
</body>
</html>
background-origin（背景图片定位参考系）示例效果图：
尾言
笔者才疏学浅，慌忙之下难免有遗漏或是疏忽，如有错误之处，还望各位看官不吝赐教，笔者在此感谢。
参考
不单单只有这6个，只是这6个比较常用。 ︎
css详解background八大属性及其含义的更多相关文章
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
- jquery的css详解（二）
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- DIV+CSS详解
DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...
- 详解android:scaleType属性
详解android:scaleType属性 转自:http://blog.csdn.net/encienqi/article/details/7913262 http://juliaailse. ...
- css详解3
推荐学习链接:css盒模型 1.盒模型的常用属性 1.1.pading <html lang="en"> <head> <meta charset=& ...
- jquery的css详解（一）
通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...
- [一]class 文件浅析 .class文件格式详解 字段方法属性常量池字段 class文件属性表 数据类型 数据结构
前言概述 本文旨在讲解class文件的整体结构信息,阅读本文后应该可以完整的了解class文件的格式以及各个部分的逻辑组成含义 class文件包含了java虚拟机指令集 和 符号表 以及若 ...
- [C#详解] (1) 自动属性、初始化器、扩展方法
文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/CSharp-focus-1.html 代码下载:点我下载 目录 前言 属性与自动属性 属性 自动属 ...
- 02_HTML5+CSS详解第三天
WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...
随机推荐
- NGK公链大事件盘点——回顾过去，展望未来！
NGK公链构想广阔,愿景宏大,2020年10月NGK正式上线,同时NGK全球发布会正式启动,建立区块链生态体系. 早在这之前,NGK就经过了紧锣密鼓的数年缜密搭建. 2018年6月NGK底层系统技术原 ...
- 以NGK 呼叫河马为例分析智能合约漏洞在哪？
合约交易是指买方和卖方根据约定,在未来某一时刻,以指定价格接受某一资产的协议. 合约是买卖双方之间权利义务的表现形式.合约交易是一种金融衍生工具,与现货市场相比,用户通过判断期货合约交易的涨跌,选择买 ...
- Mac mini M1使用简单体验(编程、游戏、深度学习)
好久不见了各位! 前一阵子忍不住剁手买了M1芯片的mac mini,为了弥补自己的内疚感就卖了自己的旧的mbp2017款.数据也完全迁移到了新机器上,之前的工作也就由mbp2017彻底换成mac mi ...
- 【Python】面向对象：类与继承简单示例
Python 面向对象 Python 是一门面向对象的设计语言,与此对应的就是面向过程编程与函数式编程 面向对象的一个优点就是更好的增强代码的重用性. 面向过程编程可以简单的理解为:重点在步骤,将一个 ...
- spring boot插件开发实战和原理
本文转载自spring boot插件开发实战和原理 实战:编写spring boot插件 为什么要编写boot插件 因为我们在开发的时候需要提供一些共同的功能,所以我们编写个共同的jar包.开发人员在 ...
- linux查看目录文件以及子目录文件大小的命令
可以使用以下命令,不过如果文件比较多,因为是递归统计大小的的,所以结果出来的会比较慢,需要等待. du -h --max-depth=1 * 以下是命令的说明 du [-abcDhHklmsSx] [ ...
- springboot对数据库密码加密
第一步:maven引jar包 <dependency> <groupId>com.github.ulisesbocchio</groupId> <artifa ...
- IDEA总结
1. 什么是idea? idea是Java开发软件 2. IDEA下载 https://www.jetbrains.com/idea/download/download-thanks.html?pla ...
- 第29天学习打卡（迭代器、泛型 、Collection工具类、set集合的特点及应用、Map集合的特点及应用）
迭代器 对过程的重复,称为迭代. 迭代器是遍历Collection集合的通用方式,可以在对集合遍历的同时进行添加.删除等操作. 迭代器的常用方法 next():返回迭代的下一个元素对象 hasNext ...
- 《C++ Primer》笔记 第2章 变量和基本类型
如果你的数值超过了int表示范围,选用long long 如果你需要使用一个不大的整数,那么明确指定它的类型是signed char或者unsigned char 执行浮点数运算选用double 当一 ...