背景滚动（background attachment）

CSS提供的background-attachment属性用于设置背景图像的固定方式，比如是否随着页面滚动。简单来说，background-attachment用于指明背景图片的位置是固定于视口，还是随着包含块移动的。可理解为定义背景图片随滚动轴的移动方式。

background-attachment: scroll | fixed | local | inherit;

background-attachment:scroll;

设置background-attachment背景图片是相对于元素自身固定，内容滚动时背景也会跟着滚动，同时附加到元素的border上。当元素设置overflow-hidden:scroll属性后会成为滚动元素，此时设置background-attachment:scroll背景图片将不会随着元素内容的滚动而滚动。

background-attachment:fixed;

设置background-attachment:fixed的元素中背景图片是相对于视口（viewport）固定，即使元素拥有滚动条，背景图片也不会随着内容而滚动。

background-attachment:local;

对于滚动元素（设置overflow:scroll属性）设置background-attachment:local后背景图片会随着内容的滚动而滚动。因为背景图片是相对于元素自身内容定位，初始状态为固定，当滚动元素出现滚动条后背景图片将会随着内容而滚动。

背景色（background color）

背景透明度（background opacity）

背景定位（background position）

Tailwind采用bg-{side}方式定义工具类用于设置背景的定位

背景大小（background size）

background-size: auto | cover | contain;

当图片大小超过容器大小时，cover属性值会对背景图片进行裁剪，所以一般会配置background-position属性来决定显示图片内容的位置。

contain属性会将图片缩小以在容器中显示完整图片，多数情况下由于容器宽高比例与图片比例不同，因此造成图片与容器上下或左右留白的情况。

cover与contain的区域在于，cover会按照背景图片最长边来按比例放大或缩小，contain则会按照背景最短边按比例放大或缩小。

position-size

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"><div class="container mx-auto my-4 p-4 text-center flex flex-row jutify-between"><div class="bg-gray-100 rounded overflow-hidden border m-2 w-1/2"><div class="h-48 w-full bg-center bg-cover bg-no-repeat" style="background-image:url('http://source.unsplash.com/800x800')"></div>cover</div><div class="bg-gray-100 rounded overflow-hidden border m-2 w-1/2"><div class="h-48 w-full bg-center bg-contain bg-no-repeat" style="background-image:url('http://source.unsplash.com/800x800')"></div>contain</div>
</div>

背景重复（background repeat）

background-repeat属性用于设置是否及如何重复背景图片，即定义背景图片的平铺模式。背景图片会从原图开始重复，原图由background-image定义，并根据background-position放置。

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

CSS3为background-repeat新增了round和space两个属性值

• round 背景图片自动缩放自导适应填满整个容器
• space 背景图片以相同间距平铺且填充整个容器或某个方向

repeat

<div class="bg-gray-100 rounded overflow-hidden border m-2"><div class="h-48 w-full bg-center bg-repeat-space" style="background-image:url('http://source.unsplash.com/100x100')"></div>center repeat space
</div><div class="bg-gray-100 rounded overflow-hidden border m-2"><div class="h-48 w-full bg-center bg-repeat-round" style="background-image:url('http://source.unsplash.com/100x100')"></div>center repeat round
</div>