经过麦宜云

2024年4月14日

背景设计

您可以在元素上设置的背景样式概述：颜色、图像、渐变、颜色叠加和视频。

*警告 01:23 — 此部分可能会影响视觉敏感者。建议谨慎观看。

通过设置元素的背景来控制外观和可读性。在 设计元素 部分 自定义设置，您可以将背景图像、渐变或颜色合并到大多数组件中（视频和照片等媒体组件除外）。

自定义设置中的设计元素部分。阴影已设置为透明。

您将学到以下内容：

背景阴影
背景艺术品
混合
阴影覆盖
背景膜

背景阴影

您可以选择将背景颜色应用于除插图和视频之外的任何元素（尽管您可以将插图和视频用作背景）。您可以通过提交颜色值（例如十六进制、RGBA 或颜色名称）或使用颜色选择器选择颜色来将背景颜色应用于任何元素。背景颜色也可以集成到文本元素或文本元素内的特定文本细节中。

有时，您可能希望整个网站的背景颜色保持一致。这就是 正文部分（所有页面） 标签被证明是有益的。

样式面板中的选择器字段下拉菜单，突出显示正文部分（所有页面）标签。

您可以设计 正文部分（所有页面） 标签有两种方法：

选择 Body 组件并选取 正文部分（所有页面） 选择器字段下拉列表中的标签 设计设置
选择任意组件并选择 正文部分（所有页面） 继承菜单中的标签 - 所有组件都从继承设计 正文部分（所有页面） 标签

一旦你确定了背景 正文部分（所有页面），您添加的任何元素都将默认采用此背景样式。您不仅可以自定义背景颜色，还可以自定义任何样式特性。在我们的 HTML 标签教程中了解有关自定义标签元素的更多信息。

大多数组件默认都有半透明背景。某些组件（如滑块单元）带有默认背景色，您可以通过在主滑块组件上提交背景色来覆盖它。

背景艺术品

Webflow 为您修改背景艺术图提供了多种选择。

在自定义设置的设计元素部分中合并背景艺术作品的菜单。

引入或更改背景艺术作品：

去 设计元素 在里面 设计设置
打 选择艺术品 从资源面板中选择艺术作品。
勾选@2x 框（将作品宽度设置为原始大小的一半，以便在 HiDPI 设备上清晰呈现）

要使用背景膜，请用背景膜组件替换组件 添加面板.

背景艺术品尺寸

菜单中突出显示了尺寸选项，用于在自定义设置的设计元素部分中加入背景艺术品。

要定义背景艺术品的尺寸，请使用自定义尺寸或以下预设之一：

风俗决定背景图稿的宽度和/或高度。也可以使用百分比值。要将背景图稿调整为大于单位，请使用大于 100% 的任何百分比。
覆盖缩放艺术作品以填充并覆盖组件的整个背景，覆盖任何指定的宽度和高度。可能会根据组件的纵横比、屏幕尺寸和艺术作品裁剪艺术作品。
包含缩放背景图片以使其保持在组件内。此值还会覆盖任何指定的宽度和高度。

背景图稿缩放的“覆盖”和“包含”选项比较。“覆盖”缩放图稿以填充并覆盖组件的整个背景，而“包含”缩放图稿以使其包含在组件内。

背景艺术品位置

默认情况下，背景图位于组件的左上角。调整背景的位置可以修改图在各种屏幕尺寸上的显示方式。

您可以垂直或水平对齐艺术品。

菜单显示了在“样式”面板的“背景”部分中添加背景图像的突出显示位置设置。左侧和顶部位置均设置为 50%。

示例摄影网站的主页上水平平铺了风景背景。

经过麦宜云

更新于 2024年4月14日

版图设计