深入解析 CSS Background 技巧本文介绍了background的一些常见的用法以及进阶技巧，同时也介绍了ba

前文

大家好，我是暗夜，关于css background，所有的前端开发童鞋可能都了解它，也都会在日常开发中经常的使用，但是很多时候，我们只是对其进行一些简单的使用，本文将跟大家一起探讨background-*更高级的应用

background的介绍

background是一个简写属性，其可以一次性定义各种背景属性，image、color、repeat、position等 backround: url('xxx.png') no-repeat 100% center/center

background的相关属性

attachment：背景图是在视口内固定还是随着包含块滚动
clip：元素的背景是否延伸到边框、内边距、内容下面
origin：背景图的原点位置相对于border、padding、content来放置
color：背景颜色
image：背景图片
position：背景图片的位置
repeat：背景图是否重复
size：背景图大小

那么这么多属性该怎么排列呢？只有两个规则：

background-size必须在background-position后面，且以/分割
background-color只能放在最后一层
background-origin和background-clip可能会出现0~2次，如果出现一次，同时设置background-origin和background-clip，如果出现两次，第一次设置background-origin，第二次设置background-clip

有的小伙伴在这就会困惑了，最后一"层"，这是什么意思，为什么color只能在最后一层呢？，下面我会对其进行解释，我们可以先带着这个疑惑来看下下面的一些case

<body>
    <div></div>
</body>
<style>
div {
    height: 500px;
    border: 1px solid black;
    background: url("https://p.ipic.vip/jtm7ex.jpg") left /200px no-repeat;
}
</style>

这里的background的各个属性值对应如下：首先url是背景图

left 是background-position，表示图片在整个盒子中居左

200px 是background-size，表示元素的宽度是200像素(这里就符合我们的规则的第一条了)

no-repeat指的是如果图片大小不满足盒子大小的情况下，不重复

上面的case我们针对position只给了一个水平方向的值，针对size只给了一个宽度，要是我们既要给position垂直方向的值，又要给size的高度该怎么写呢，let our see once time

<body>
    <div></div>
</body>
<style>
div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 500px;
    border: 1px solid black;
    background: url("https://p.ipic.vip/jtm7ex.jpg") right bottom/200px 400px  no-repeat;
}

没错只要这样就可以了，上面的代码表明了position: right bottom，size: 200px 400px

既然我们了解了一些background的基础信息了，下面我们就来解释一下我们刚才提到的层，我们以一个我在工作中实际遇到过的案例展开。不多说，上case！

case1：

向上图中大家会如何实现呢？最简单的，而且大家最容易想到的是img+text+img吧

<div>
    <img src="https://p.ipic.vip/jtm7ex.jpg" alt="">
    background 技巧
    <img src="https://p.ipic.vip/0uf3dh.jpg" alt="">
</div>

div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 500px;
    border: 1px solid black;
}
img {
    width: 200px;
    height: 300px;
}

除了这种方法还有其他更好的实现方案吗？答案肯定是有的，那就是用background实现。background并非只能指定一张背景图，他可以指定多张，每张都是一个背景层，每一层是在Z轴上排列，最前面的层会在最上面，最后面的层会在最后面。每个背景层的样式可以用, 分隔开。此时我们也解惑一下我们上面留下的问题，background-color为啥只能在最后一层，就是因为每个元素只会有一个背景色，背景色肯定是在最下面的，所以我们就放在样式的最后面

好了，了解了这些，这个时候我们就需要解决上面的case了，直接上代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>background 高级进阶</title>
</head>
<body>
    <div></div>
</body>
<style>
div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 500px;
    border: 1px solid black;
    background: url("https://p.ipic.vip/jtm7ex.jpg") left center/250px 400px no-repeat, url("https://p.ipic.vip/0uf3dh.jpg") right center/250px 400px no-repeat;
}
</style>
</html>

这样就可以轻松的实现了。

以上就是我对background的理解，欢迎大家积极探讨~ 如果写的不好，还希望各位同学轻点喷~感谢大家