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（背景图片定位参考系）示例效果图：

尾言

笔者才疏学浅，慌忙之下难免有遗漏或是疏忽，如有错误之处，还望各位看官不吝赐教，笔者在此感谢。

参考

  1. 不单单只有这6个，只是这6个比较常用。 ︎

css详解background八大属性及其含义的更多相关文章

  1. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  2. jquery的css详解（二）

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  3. DIV+CSS详解

    DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...

  4. 详解android:scaleType属性

    详解android:scaleType属性 转自:http://blog.csdn.net/encienqi/article/details/7913262    http://juliaailse. ...

  5. css详解3

    推荐学习链接:css盒模型 1.盒模型的常用属性 1.1.pading <html lang="en"> <head> <meta charset=& ...

  6. jquery的css详解（一）

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  7. [一]class 文件浅析 .class文件格式详解 字段方法属性常量池字段 class文件属性表 数据类型 数据结构

    前言概述  本文旨在讲解class文件的整体结构信息,阅读本文后应该可以完整的了解class文件的格式以及各个部分的逻辑组成含义   class文件包含了java虚拟机指令集 和  符号表   以及若 ...

  8. [C#详解] (1) 自动属性、初始化器、扩展方法

    文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/CSharp-focus-1.html 代码下载:点我下载 目录 前言 属性与自动属性 属性 自动属 ...

  9. 02_HTML5+CSS详解第三天

    WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...

随机推荐

  1. 「NGK每日快讯」12.23日NGK第50期官方快讯!

  2. 2021-02：Teams开发平台更新概述

    作为2021年工作计划的一部分,我会在每月的第三个星期五发布Teams开发平台的更新报告,给大家整理和讲解最新的平台功能,以及特色场景.这是第一篇文章,我会挑选截至到2月份一些重要的更新,以后每月的更 ...

  3. CentOS7安装Mysql并配置远程访问

    (su root登录到root账户) 下载repo源 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 安装rpm ...

  4. mybites框架遇到的坑之Mapper.xml文件不要随意加注释和ORA-00911

    原文链接:https://blog.csdn.net/streetlight8023/article/details/69388495/ 先说解决方法: org.mybatis.spring.MyBa ...

  5. Redis 内存淘汰机制详解

    一般来说,缓存的容量是小于数据总量的,所以,当缓存数据越来越多,Redis 不可避免的会被写满,这时候就涉及到 Redis 的内存淘汰机制了.我们需要选定某种策略将"不重要"的数据 ...

  6. CSS 书写禅机

    这是未来的趋势所向,如是我行. 注意:原文发表于 2017-9-6,随着框架不断演进,部分内容可能已不适用. CSS 日渐惹人憎恶. 究其原因颇多,归根结底,皆因 CSS 给人的感觉总是飘渺迷蒙.变幻 ...

  7. Go | Go 结合 Consul 实现动态反向代理

    Go 结合 Consul 实现动态反向代理 代理的核心功能可以用一句话概括:接受客户端的请求,转发到后端服务器,获得应答之后返回给客户端. Table of Contents 反向代理 实现逻辑 Go ...

  8. Python3.x 基础练习题100例（81-90）

    练习81: 题目: 809??=800??+9?? 其中??代表的两位数, 809??为四位数,8??的结果为两位数,9??的结果为3位数.求??代表的两位数,及809*??后的结果. 程序: a = ...

  9. golang调用shell命令（实时输出, 终止等）

    背景 是这样的,最近在研究一个定时任务系统的改造,可能有点像jenkins做到的那种吧. 可以输入shell命令,也可以执行py脚本等等,相比之前来说,也要能够及时停止! 但是遇到了这么个问题,gol ...

  10. weblogic弱口令+后台getshell

     https://www.cnblogs.com/bmjoker/p/9822886.html利用docker环境模拟了一个真实的weblogic环境,其后台存在一个弱口令,并且前台存在任意文件读取漏 ...