音画帖背景设置

马黑黑

一、认识 background 简写属性

background简写属性的语法顺序：

1. background-color （背景颜色）
2. background-image （背景图像）
3. background-repeat （背景重复模式）
4. background-attachment （背景固定模式）
5. background-position （背景位置）
6. background-size （背景尺寸）

第4个属性 background-attachment 用来设置背景图像是固定还是随页面滚动，fixed 表示背景图像固定，scroll（缺省默认）表示随页面滚动。我们做帖子时使用其缺省设置，就不用设置这个属性，所以，根据语法顺序，我们经常这样设置帖子的背景以减少代码行数：

background: #aaa url(图片地址) no-repeat center/cover;

其中：

1. #aaa = 背景颜色
2. url(图片地址) = 背景图像（url是CSS函数）
3. no-repeat = 背景重复方式（可选值还有 repeat | repeat-x | repeat-y
4. --（固定模式不用设置，使用省略默认值）
5. center = 背景位置（center表示居中，也可用 x% y% 以及位置关键字表示）
6. 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 以保证图像始终以不失真的方式渲染（全屏下左右或上下会有空白）

梦江南

黑黑老师晚上嚎！谢谢老师辛苦，学习了。

杨帆

background的属性不少呢，谢谢马老师详细讲授