Tailwind Background

背景滚动（background attachment）

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

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

属性值	描述
scroll	默认值，背景像随着页面其它部分滚动而滚动，背景相对于元素固定，背景和内容绑定。
fixed	背景不会随着页面的滚动而滚动，背景相对于视口固定，随页面滚动背景不动，相当于背景被设置在body上。
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后背景图片会随着内容的滚动而滚动。因为背景图片是相对于元素自身内容定位，初始状态为固定，当滚动元素出现滚动条后背景图片将会随着内容而滚动。

工具类	属性
bg-scroll	background-attachment:scroll;
bg-fixed	background-attachment:fixed;
bg-local	background-attachment:local;

背景色（background color）

工具类	属性
bg-transparent	background-color:transparent;
bg-current	background-color:currentColor;
bg-black	background-color:#000;
bg-white	background-color:#fff;

背景透明度（background opacity）

工具类	描述
bg-opacity-0	--bg-opacity:0;
bg-opacity-25	--bg-opacity:0.25;
bg-opacity-50	--bg-opacity:0.5;
bg-opacity-75	--bg-opacity:0.75;
bg-opacity-100	--bg-opacity:1;

背景定位（background position）

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

工具类	描述
bg-top	background-position:top;
bg-left-top	background-position:left top;
bg-right-top	background-position:right top;
bg-left	background-position:left;
bg-center	background-position:center;
bg-right	background-position:right;
bg-bottom	background-position:bottom;
bg-left-bottom	background-position:left bottom;
bg-right-bottom	background-position:right bottom;

背景大小（background size）

background-size: auto | cover | contain;

属性值	描述
auto	默认值，保持背景图片原始宽度和高度。
cover	将背景图片缩放，若图片本身大于容器则缩小到合适宽高以适应容器。
contain	将背景图片缩小以在容器中显示完整图片，若容器宽度于背景图片不一致时会出现留白。

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

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

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

工具类	属性
bg-auto	background-size:auto
bg-cover	background-size:cover
bg-contain	background-size: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 背景图片以相同间距平铺且填充整个容器或某个方向

工具类	属性
bg-repeat	background-repeat:repeat;
bg-no-repeat	background-repeat:no-repeat;
bg-repeat-x	background-repeat:repeat-x;
bg-repeat-y	background-repeat:repeat-y;
bg-repeat-round	backgound-repeat:round;
bg-repeat-space	background-repeat: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>