图解CSS: CSS 背景(Part1)

作者：大漠 日期：2022-07-22 点击：732
CSS
background
图解CSS
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

背景（background）是 CSS 中最常见也是最基础的一个属性，它自 CSS 1.0 版本就开始有了。最早的时候我们可以通过 background 给一个元素盒子的背景层设置背景颜色（background-color）、背景图像（background-image）。如果是背景图像的话，还可以调整背景图像的位置（background-position）、设置背景图像的平铺方式（background-repeat）以及背景图像在背景层的依附模式（background-attachment）。不过，随着 CSS 技术不断向前发展，CSS 为开发者提供了一些新特性用来控制背景图像，比如背景图像的大小（background-size）、背景图像的剪切（background-clip）、背景图像的定位区域（background-origin）以及给同一个元素盒子设置多个背景。除此之外，CSS 还为 background 的一些老属性新增了功能，比如 background-position可以指定四个值，通过方向设置背景图像的位置，background-repeat 多了几种不同的平铺方式。另外，CSS 还可以使用 background-blend-mode 属性来设置不同的混合模式，从而改变背景图像的效果。

当然，你可能对这些属性的基本使用有一定的了解，但其中有一些细节是不为人之的，接下来，我将从基础使用开始和大家聊聊CSS中背景方面的知识，希望能给大家带来不一样的收获！如果你感兴趣的话，那请继续往下阅读。

背景层

在具体聊 CSS 的背景（background）之前，先简单的来聊一下元素盒子的背景层。众所周之，CSS 会视每一个元素为一个盒子。每个盒子都有不同的上下文格式（视觉格式化模型，可以使用 display 属性来改变视觉模型）和大小（CSS 盒模型中的相关属性将会影响盒子的大小）。其实，每个盒子都有着相同的层，即 内容层（content-box）、内距层（padding-box）、边框层（border-box）、背景层（background-box）和 阴影层（shadow-box）：

背景层是完全位于边框层之下的，它从其padding-box区域开始呈现在框的内容后面。这使背景层根本不与边界重叠。而我们今天要聊的 background 相关的属性就是用来美化背景层的。

背景简介

CSS 的 background 属性是隶属于 CSS Backgrounds and Borders Module Level 3 模块中的一部分，它的使用很简单：

.element {
    background: [<bg-layer># ,]? <final-bg-layer>
}

其中 <bg-layer> 和 <final-bg-layer> 分别是：

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> =  <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

即：

<background-color> = background-color
<bg-image> = background-image
<bg-position> = background-position
<bg-size> = background-size
<repeat-style> = background-repeat
<attachment> = background-attachment
<box> = background-origin
<box> = background-clip

也就是说，background 是 background-color、background-image、background-position 、background-size、background-repeat、background-attachment、background-origin 和 background-clip 属性的简写。比如下面这个示例：

.box {
    background: #fff url("avatar.svg") left top / 160px 160px no-repeat;
}

背景图像位于元素盒子的左上角，而且该背景图像的大小是 160px x 160px：

使用简写属性时需要有几个细节需要注意：

  • <bg-position> 和 <bg-size> 之间需要使用斜杠分隔符 /分隔开，并且要严格遵守 <bg-position> / <bg-size>方式，否则会让 background 失效
  • 如果background中同时有两个<box>，第一个则是 background-origin，第二个则是 background-clip；如果只有一个<box>，表示background-origin 和 background-clip 取相同的值

在 CSS 中给定一个有效的 background 声明时，对于每一层，简写首先将 background-image 、background-position 、background-size 、background-repeat 、background-origin 、background-clip 和 background-attachment 的相应层设置为该属性的初始值，然后为声明中为该层指定的显式值赋值。最后，background-color 设置为指定的颜色(如果有的话)，否则设置为初始值（transparent）。

另外还可以给 background 中使用逗号分隔符, 来给元素盒子设置多个背景层，每个背景层都可以设置 <bg-layer>，这样设置时，也被称为多背景。

.element {
    background: 
        url(a.png) top left no-repeat,
        url(b.png) center / 100% 100% no-repeat,
        url(c.png) white;
}

后面有一节会专门和大家聊聊多背景的使用和细节。

上面演示的只是 background 属性的最基本使用，其实在使用它时有很多细节需要我们注意或者说掌握，比如 background-image、background-position、background-repeat、background-size等。接下来，针对background每个子属性来展开介绍。

背景颜色

我们可以使用 background-color 来显式的给元素盒子的背景层设置一个纯色，比如：

.element {
    background-color: #09f;
}

background-color 可以接受的值有 <color>、transparent 和 currentColor。其中 transparent 是其初始值，也就是说，如果未显式设置 background-color 的值，则表示元素盒子背景层是一个透明层，允许父级的内容可见。如果显式的设置了值，元素盒子背景图层上设置的有效颜色会位于该元素上绘制的其他内容的后面。

<color> 可以是颜色关键词或一个数值范围，具体可以参阅读 CSS Color Module Level 3 模块中的相关描述，或者移步阅读 图解CSS 系列中的《CSS 颜色》一文。

background-color 除了显式设置 <color> 值之外，还可以设置关键词 currentColor：

.element {
    background-color: currentColor;
}

如果background-color值为currentColor的话，它的计算值取决于元素的color值，如果元素自身未显式设置color值，将会取自于元素的祖先元素的color值（color是一个可继承属性），直至到HTML的根元素<html>的color值。如果 <html> 未显式设置color值，将会取自客户端（浏览器）的默认设置值，一般为 #000（即black）：

你可能已经发现了，如果同时给元素设置了背景颜色和背景图像时，背景颜色将会位于背景图像下面，当背景图像尺寸足够大或采用完全平铺的方式（background-repeat: repeat）时，背景图像会完全遮盖住背景颜色，此时即使设置了背景颜色也会不可见：

两者之间如果分层来看的话，类似下图这样：

相对而言，background-color 的使用是较为简单的，在实际使用的时候，如果你希望给一外元素背景层设置一个纯色时，就可以使用 background-color 来实现。当然，你也可以使用纯色的背景图像来实现（比如纯色的渐变）。不过，如无特殊情况，一般不这么使用。

背景图像

你可以使用 background-image 给元素背景层添加背景图像：

.element {
    background-image: <bg-image>#
}

其中 <bg-image> 的值为 <image> 或 none，而且none是background-image属性的初始值。

当一个元素的 background-image 取值为 none 时，它（none值）也会算作图像层，但不绘制任何东西。而且下列情景之一也会被视为 none：

  • 一个空白的图像(零宽度或零高度)，比如 url()
  • 图像下载失败，比如 url(avatar.png)（相应的路径中找不到 avatar.png）
  • 不能显示(例如，它不是一个支持的图像格式），比如 url(avatar.bg)

当一个元素的 background-image 取值为 <image> 时，它可以是 url() 函数引入的图片（图片要存在，且加载成功）或 CSS 渐变绘制的渐变图像。

background-image: <image>
<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | repeating-conic-gradient()

如果使用 CSS 的 url() 函数引入背景图像的话，可以是相对路径下的图像，也可以是绝对路径的图像，比如：

.element {
    background-image: url('../images/avatar.svg'); /* 相对路径 */
}

.element {
    background-image: url('//www.w3cplus.com/images/avatar.svg'); /* 绝对路径 */
}

除此之外，url() 函数还可以引用 数据URI：

.element {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2l...')
}

另外，可用于<img>的图片格式都可以用于background-image，比如.jpg、.png、.svg、.gif、.webp、.avif和.apng等。

刚才提到过了，<image>除了url()函数引入的图像之外，CSS的渐变也会被视为<image>，也就是说，使用CSS的 linear-gradient()（线性渐变）、repeating-linear-gradient()（重复线性渐变）、radial-gradient()（径向渐变）、repeating-radial-gradient()（重复径向渐变）、conic-gradient()（圆锥渐变）和 repeating-conic-gradient()（重复圆锥渐变）等绘制的渐变效果当作背景图像使用：

.element {
    background-image: var(--gradient);
}

.linear-gradient {
    --gradient: linear-gradient(red, gold, yellow, blue, lime, #09f)
}

.radial-gradient {
    --gradient: radial-gradient(circle at center,red, gold, yellow, blue, lime, #09f)
}

.conic-gradient {
    --gradient: conic-gradient(red, gold, yellow, blue, lime, #09f)
}

.repeating-linear-gradient{
    --gradient: repeating-linear-gradient(red, red 10%, gold 10%, gold 20%)
}

.repeating-radial-gradient {
    --gradient: repeating-radial-gradient(circle at left top, red, red 10px, gold 10px, gold 20px)
}

.repeating-conic-gradient {
    --gradient: repeating-conic-gradient(red, gold 20deg)
}

就像上面示例所呈现的渲染效果，不管使用哪种渐变绘制的背景图像，本质上都会调整大小以匹配元素的空间大小。也可以使用background-size 来调整其大小。

在 CSS 中结合CSS的渐变特性以及多背景，再加上background-size、background-clip等特性，可以使用纯 CSS 绘制一些具有纹理效果的背景。比如 MagicPattern网站 和 @Lea Verou写的一个纹理库 提供的效果：

我们来看一个最简单的示例，就是黑白相隔的纹理效果：

body {
    background-color: #eee;
    background-image:
    linear-gradient(45deg, black 25%, transparent 25%, 
        transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, 
        transparent 75%, black 75%, black);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

效果如下：

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css/css-background-part1.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部