一、认识 background 简写属性
background简写属性的语法顺序：
- background-color （背景颜色）
- background-image （背景图像）
- background-repeat （背景重复模式）
- background-attachment （背景固定模式）
- background-position （背景位置）
- background-size （背景尺寸）
第4个属性 background-attachment 用来设置背景图像是固定还是随页面滚动，fixed 表示背景图像固定，scroll（缺省默认）表示随页面滚动。我们做帖子时使用其缺省设置，就不用设置这个属性，所以，根据语法顺序，我们经常这样设置帖子的背景以减少代码行数：
background: #aaa url(图片地址) no-repeat center/cover;
其中：
- #aaa = 背景颜色
- url(图片地址) = 背景图像（url是CSS函数）
- no-repeat = 背景重复方式（可选值还有 repeat | repeat-x | repeat-y
- --（固定模式不用设置，使用省略默认值）
- center = 背景位置（center表示居中，也可用 x% y% 以及位置关键字表示）
- cover = 背景尺寸（cover和contain是关键字表示法，还可用百分比和长度单位，可同时设置xy方向的尺寸）
注意：url()函数的图片地址在 Discuz! 论坛发帖时应使用小角引号包裹以避免地址被 ubb 语法解析而破坏掉其结构。
【附】较完整的background设置写法（属性顺序不论）：
background-color: #aaa;
background-image: url(图片地址);
background-repeat: no-repeat; /* repeat | repeat-x | repeat-y */
background-attachment: scroll; /* fixed */
background-position: center; /* 0% 0% */
background-size: cover; /* contain | 100% | 100% 100% */
二、帖子背景设置方法与技巧
建议使用简写的 background 属性来设置帖子的背景。从上面的介绍我们已经知道，简写属性的 background 可以设置 ① 背景色、② url(图像)、③ 图像相关几个设置（重复 + 位置 / 大小），语句结构可以固定为：
background: 颜色 url(图片) 重复 位置 / 大小
把它当作公式，使用时套用即可。
技巧主要针对帖子宽高和背景图片尺寸的配套设置。
很多做帖人纠结过这个问题，问题主要集中在图片作为帖子背景的最终渲染效果——图片未能呈现全貌或是失真了。
凡事有得有失，取舍艰难也不能回避，总要设法解决问题——即便最终问题并未能完美解决。
一般而言，帖子元素的尺寸应和背景图片的尺寸相一致，或保持相同的宽高比，这样初始状态下帖子背景图片的渲染不会被扭曲也不会被剪裁。下面举例说明：
假设所准备的背景图片是 1600*700，那么，帖子的宽高也应设置为 1600*700，背景尺寸使用 cover 或 contain 都行；如果希望帖子的宽度是1200px，那么就涉及到帖子宽高比和图片宽高比二者保持一致的问题，需要根据图片的实际尺寸计算一下帖子的高度：
帖子高度 ：1200*700/1600 = 525
也可以不用计算帖子高度，而是使用 aspect-ratio 属性强制宽高比，依据图片的比例：
width: 1200px;
aspect-ratio: 12/7;
新的问题是：帖子进入全屏渲染状态后，目标显示终端的尺寸不会迁就帖子的任何宽高设置，这样上面设置的机制在全屏状态下就会失效。这时，background-size 扮演最重要的角色，其属性值设置直接影响帖子全屏后背景图像的渲染效果：
background-size 可选属性值：
auto - 以背景图片的比例缩放背景图片
cover - 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain - 缩放背景图片以完全装入背景区，可能背景区部分空白
百分比和长度单位 - 建议使用双值分别设定xy方向
如何选择取决于对最终渲染的预期：希望自始至终图像不变形，用 contain，缺点是会有空白边缘；希望图片铺满整个帖子，用 cover，缺点是图像有一个方向会被裁剪；希望图像既要铺满帖子空间又要全部呈现图像本身，用 100% 100%，缺点是图像可能会扭曲变形。
三、实例
👉 沙啦啦哩
帖子附有代码。这里简单介绍一下帖子的情况：
- 背景图片尺寸 1275*850，宽高比为 1.5:1
- 帖子初始宽度设为 1200px
- 帖子使用
aspect-ratio: 3/2; 属性设置强制宽高比配套背景图片尺寸宽高比
- background-size 属性设置为 contain 以保证图像始终以不失真的方式渲染（全屏下左右或上下会有空白）
发表于