css详解background八大属性及其含义

最新推荐文章于 2024-09-28 00:53:29 发布
置顶 最新推荐文章于 2024-09-28 00:53:29 发布
阅读量2.9k 收藏 31
点赞数 9
分类专栏： css 文章标签： css3 css background
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35508835/article/details/115680706
版权

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个比较常用。 ↩︎

Fatman_
关注
专栏目录
CSS属性大全 (1).pdf
08-18
### CSS属性详解 #### 一、字体样式 (`font`) - **定义与用法**：`font` 属性是复合属性，可以同时设置字体样式、变体、粗细、大小和字体族。 - **语法**：`font: font-style font-variant font-weight font-size/...
CSS 之 background 系列属性详解
热门推荐
weixin_45092437的博客
03-09 4万+
背景系列属性，共包含9种属性：background-color：设置元素的背景颜色。background-image：设置元素的背景图片。background-size：设置元素背景图片的大小。background-position：设置元素背景图片的位置。background-repeat：设置背景图片是否重复，以及如何重复。background-clip：设置元素背景的渲染区域。background-origin：设置元素背景的定位区域。background-attachment：设置元素的背景图片是否
CSS背景（background）篇
weixin_44908855的博客
06-21 1万+
1. background概述 CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 属性 描述 background-color: 背景颜色 background-image: 背景图片地址 background-repeat: 是否平铺 background-position: 背景位置 background-attachment: 背景固定还是滚动 2. background-image设置背景图 background-image:url("imgs/main
css的背景background属性
最新发布
Citrus的博客
09-28 1215
background 是一个复合属性，它允许你一次性设置多个与背景相关的样式。background属性还可以设置不同的子属性。
【CSS】background各属性一览汇总
ColdCoder的博客
12-20 1万+
前言： 某天上班打开未关机电脑，发现电脑自动打补丁，谷歌浏览器也更新了，但打开项目后发现，设置的背景图竟然未铺满整个div box。原本设置： { background: url('../../xxx.png') no-repeat 100% 100%; } 必须设置： { background: url('../../xxx.png') no-repeat 100%/cover; } 这时才能显示为铺满效果。 经过尝试发现，我电脑更新后的谷歌浏览器，按照背景图比例显示图像，未进行拉
CSS-background属性【看这一篇就够了！！！】
zheshiyangyang的博客
08-28 3718
padding区域是有背景颜色的。
CSS的background背景属性详解
共同进步
05-22 7613
CSS的background背景属性详解 background-color: 背景颜色 - background-image: 背景图片 - background-repeat: 重复背景图片 - background-attachment: 是否固定或者随着页面的其余部分滚动 - background-position: 背景图片的位置 - background-size: 背景的尺寸 - background-origin: 背景图片定位区域 - background-clip: 背景图
css属性大全完整版
04-14
以上列举了CSS中较为常用的一些属性及其含义，通过这些属性可以实现丰富的网页布局和设计效果。掌握这些基本的CSS属性可以帮助开发者更好地控制网页中的各个元素，从而实现更加美观和功能强大的网页界面。
HTMLcss属性
11-23
### HTML CSS 属性详解 #### 一、字体属性(Type) 字体属性主要用来控制网页中文本的外观，包括字体家族、字体样式、字体大小等。 - **`font-family`**: 设置文本使用的字体家族。例如 `font-family: Arial, sans-...
HTML及CSS基础知识
04-13
### HTML及CSS基础知识详解 #### 一、内联样式与`<style>`标签的使用 在HTML文档中，可以通过多种方式应用CSS样式。其中一种常用的方式是使用`<style>`标签来定义样式规则，这些规则将应用于整个文档或文档中的...
Css属性文档
10-20
### CSS属性文档知识点详解 #### 一、字体属性（Font） **1.1 font-family** - **作用**：用于指定元素使用的字体。 - **值**： - 所有的字体，通常指定了一个字体列表，浏览器会根据可用性选择最适合的字体。 -...
CSS 第005 背景-理论
ml_YSY的博客
11-09 426
背景属性：background CSS 背景属性用于定义HTML元素的背景。 背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是： 值 说明 background-color 指定要使用的背景颜色 background-position 指定背景图像的位置 background-size 指定背景图片的大小 background-repeat 指定如何重复背景图像 background-origin 指定背景图像的定位区域 .
【30】CSS核心样式（8）——背景属性（上）
倏存的博客
04-06 801
• 背景颜色 background-color • 背景图片 background-image • 背景重复 background-repeat • 背景定位 background-position
CSS背景background八种属性
m0_74577714的博客
10-27 2208
想必大家对背景不陌生，让我为大家介绍一下吧！我们给元素添加背景相关样式之前，必须要有宽度和高度，宽度可以省略，会继承父级的宽度，如果在没宽高的元素上使用则无效。
CSS背景background详解，background-position详解
会敲代码的男老师的博客
02-03 3万+
背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。 css2 中的背景(background) 概述 CSS2 中有5个主要的背景(background)属性，它们是： * ba
细说css中的background属性以及一些问题
苏苏就是小苏苏的博客
08-30 7697
1.background的属性 属性 background-color 属性设置元素的背景颜色。 这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。 transparent 值。尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。 background-positi
css中的background属性
weixin_44161385的博客
04-28 1755
css的background属性
CSS之background深度详解
kk_yanwu的博客
03-08 9443
background 是CSS中一个常用的属性，用来修改某个元素的背景； background 拥有8种属性，分别为： background-color background-position background-size background-repeat background-origin background-clip background-attachment background...
background详解
时光清浅处，一步一安然
04-12 2104
background是 CSS 中的一个复合属性，用于设置元素的背景样式，包括颜色、图像、位置、大小、重复方式等。它可以简化为单独的背景属性，也可以一次性设置多个背景属性值。以下是background。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值