背景样式 - Webflow 帮助
了解如何设置元素的背景样式：颜色、图像、渐变、颜色覆盖和视频。
背景颜色
您可以为除图像和视频以外的任何元素设置背景颜色（尽管您可以将图像和视频用作背景）。通过输入颜色值（例如，hex、rgba 或颜色名称）或使用颜色选择器来添加背景颜色。您还可以为文本元素或文本元素内的特定文本内容添加背景颜色。
如果希望整个网站的背景颜色保持一致，请使用 Body (All pages) 标签进行继承。通过在样式面板中选择 Body 元素并选择标签或使用继承菜单来设置样式。对 Body (All pages) 的任何更改将默认为新元素。
大多数元素默认具有透明背景。一些元素，如滑块组件，具有您可以覆盖的默认颜色。
背景图像
Webflow 提供了许多选项来自定义您的背景图像。
要添加或更改背景图像：
- 在 样式面板 中滚动到 背景
- 从资产面板中点击 选择图像
- 勾选 @2x 选项，以便在 HiDPI 设备上获得更清晰的图像
要设置背景视频，请在添加面板中使用 背景视频组件。
背景图像大小
- 自定义：设置宽度/高度或百分比值。使用超过 100% 的值进行放大。
- 覆盖：填充并覆盖背景，可能会裁剪图像。
- 包含：保持图像在元素内。
背景图像位置
默认是左上角。您可以手动调整位置（px, %, VW, VH）。
平铺
背景图像默认在垂直和水平方向上重复。可以控制水平、垂直重复或不重复。
固定或滚动
选择不固定（图像滚动）或固定（图像保持不动）。固定图像由视口包含。
渐变
渐变可以单独使用或与背景颜色/图像叠加。两种类型：
- 线性渐变
- 径向渐变
两者都有颜色渐变的停止点。
线性渐变
通过拨盘、箭头（45度增量）或字段输入设置方向。
渐变停止点
编辑停止点的颜色/不透明度。叠加在图像上时，较低的不透明度使图像可见。点击添加停止点。拖出以移除。
重复
切换渐变的重复。
反转
图标用于反转停止点位置。
径向渐变
创建圆形渐变。左侧停止点是中心的颜色。
位置
通过点选择焦点或手动输入值/单位。
大小
预设控制：
- 最近的边：中心到最近的边
- 最近的角：中心到最近的角
- 最远的边：中心到最远的边
- 最远的角：（默认）
颜色覆盖
使用颜色选择器和不透明度为背景添加颜色覆盖。
图像和渐变的分层
堆叠多个背景图像、渐变和覆盖以获得效果。通过拖动重新排序，用眼睛图标切换可见性，用垃圾桶删除。
背景视频
背景视频是无声的循环视频，用于背景以增加电影效果。请注意：
通过 快速查找 (CMD/CTRL+E) 或添加面板 > 组件添加。上传你的视频（<30MB；webm, mp4, mov, ogg）。文件名应避免空格/特殊字符。
上传后会进行转码（mp4 和 webm 以支持浏览器）。
视频设置
- 循环视频：连续重复播放。
- 自动播放视频：页面加载时开始播放。
- 包含播放/暂停按钮：访客可以控制播放。
预览背景视频
- 悬停缩略图
- 在新标签页中打开
- 工具栏中的预览图标
替换背景视频
打开设置以替换视频、转码、预览等。
将背景视频用作部分
将内容放入背景视频元素中。在样式面板中像往常一样进行样式设置。
背景视频叠加
添加渐变或纯色叠加以增强对比度。叠加层位于视频之上，内容之下。
这就是在 Webflow 中使用背景的方法！