如果一直是跟着 CSS Grid 布局这个系列到这里，你应该还记得，在 CSS Grid 布局中，我们可以通过网格项目放置的方式，让不同的元素重叠在一起，并且通过 CSS 的 z-index 来控制网格项目在 z 轴上的层叠顺序。也就是说，以往需要使用 CSS 的 position 的绝对定位（absolute）来实现的布局，现在可以直接使用 CSS Grid 来解决。在这一节，我们主要来看如何使用 CSS Grid 实现元素叠加的布局效果。
大漠 Full-Bleed 是印刷界中的一个概念，被称为 全出血，即在印刷中，我们有出血量，这是纸张被修剪的地方以外的区域。正因如此，印刷设计师习惯于在设计工作中考虑出血量。我们通过设置安全区域来做到这一点。这几年，这种被称为“全出血”的概念也运用到 Web 的布局中。就是在受限宽度的一列中使用全宽元素的布局，比如在较窄的一列文本中使用一个边缘到边缘的图像。在社区中，也有人把这种布局效果称为 Full-Width 布局，也有人称为 Edge-To-Edge 布局。说实话，在Web中实现这种布局效果，已不是难事，社区中有很多种不同的技术方案，都可以达到这个布局效果。不过，今天我们以不同的角度来思考这个问题！
大漠 前两个有关于 CSS Grid 案例，主要介绍了如何使用 CSS Grid 来构建 重叠布局 和 Full-Bleed 布局。今天我们来一起再来看另一个由 CSS Grid 构建的网格布局，即 交叉布局。通过这个案例来更好的帮助我们更进一步理解 CSS Grid 的相关属性在实际中（Web 布局）如何使用。
大漠 一直以来，在 Web 布局中都是以方方正正的矩形向用户展示 UI 效果，而且众多 Web 开发者的意识中也是如此，Web 的布局是无法打破矩形排列的限制！但 Web 技术的发展速度是惊人的，每天都有新的东西出现在我们的眼前。就在这短短的几年时间内，用于 Web 布局的新特特别的多。换句话说，如果今天设计师跟你说：“亲，整一个类似杂志或报刊类的布局吧”！你会爽快的说 OK! 即，使用现在的新特性可以打破矩形框的限制，让你在 Web 上实现像杂志一样的排版布局。
大漠 在现代 Web 中，阴影已经成为主要设计要素之一，甚至是随处可见。 阴影增加了质感、透视、并强调物体的尺寸。在 Web 设计中，使用光和影子可以增加物理上的真实感，并且可以用来制作丰富的、可触摸的 UI 界面。从 CSS 技术角度来说，在 Web 中给 UI 添加阴影效果有多种不同的技术方案，但从实现阴影效果的 CSS 属性来说，常见的主要有 text-shadow（文本阴影）、box-shadow（盒子阴影）和 filter的drop-shadow()（不规则阴影）。今天，我们就一起来聊聊 CSS 这方面的特性。
大漠 溢出是CSS中的另一个重要的概念。从 图解CSS系列 的《CSS 盒模型》和《元素尺寸的设置》中可以得知，Web上的内容都是放置在一个具有一定大小的盒子中。在某些情况下，盒子大小是有限制的，有可能内容会超出这些盒子，在 CSS 中，这种现象被称为 溢出。而且 W3C 的CSS工作小组专门为溢出划为一个独立的模块。在这一章中，将和大家一起探讨 CSS 溢出模块相关的话题。比如，什么是溢出？什么情况下会导致溢出？如何使用CSS来控制溢出等等。
大漠 在第一部分主要和大家聊了CSS溢出的概念和理论相关的，在第一部分主要以实例，问题排查和常见溢出问题三个部分展开。在构建 Web 页面或应用的时候，总是避免不了给容器设置一个具有约束性的尺寸，有的时候，因为容器没有足够的空间来容纳内容，从而造成内容溢出容器，严重的会打破 Web 布局，干扰页面的美观。为了让这些现象能不干扰 Web 布局，所以需要CSS溢出特性。除此之外，我们在构建一些Web组件和实现一些UI效果，也需要依赖CSS溢出特性。那么接下来，我们来看一些溢出相关的案例。
大漠 背景（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 background属性中的background-image、background-repeat、background-attachment 等属性。今天接着和大家一起来探讨其另外三个子属性，即 background-position、background-clip 和 background-origin。感兴趣的同学请继续往下阅读！
大漠 前面已经花了两篇的篇幅（《CSS背景：Part1和Part2》）介绍完了除background-size之外的所有background子属性的特性以及使用。众所周之，在Web中对于<img>引入的图片，我们可以显式使用width、height、aspect-ratio或object-fit等属性来调整图片尺寸，但对于背景图片，我们只能使用background-size来进行调整。那么background-size是如何决定背景图片尺寸的计算呢？如果你感兴趣的话，这篇文章可以告诉你很多不为人知的答案。
大漠