--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds' title: '给版块配颜色、照片或渐变背景 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:42:34+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 任何版块都可以用颜色、照片或渐变填充。颜色和照片来自 Style 面板，版块、行、列和元素都有。版块多一个 Background effects 面板，用于渐变、固定和视差照片以及 YouTube 视频。示例搭建深蓝色版块，配城市照片、白色文字和顶部渐变。 该视频在版块后添加照片，再用渐变覆盖。 tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 给版块配颜色、照片或渐变背景 description: |- 任何版块都可以用颜色、照片或渐变填充。颜色和照片来自 Style 面板，版块、行、列和元素都有。版块多一个 Background effects 面板，用于渐变、固定和视差照片以及 YouTube 视频。示例搭建深蓝色版块，配城市照片、白色文字和顶部渐变。 该视频在版块后添加照片，再用渐变覆盖。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:42:34+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds' description: |- 任何版块都可以用颜色、照片或渐变填充。颜色和照片来自 Style 面板，版块、行、列和元素都有。版块多一个 Background effects 面板，用于渐变、固定和视差照片以及 YouTube 视频。示例搭建深蓝色版块，配城市照片、白色文字和顶部渐变。 该视频在版块后添加照片，再用渐变覆盖。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 给版块配颜色、照片或渐变背景. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [让版块铺到边缘](/zh-hans/hc/documentation/learn-dxpr-builder/design/full-width-layouts) - [让元素随滚动、悬停或点击动起来](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab) - [设计首屏版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 任何版块都可以用颜色、照片或渐变填充。颜色和照片来自 **Style** 面板，版块、行、列和元素都有。版块多一个 **Background effects** 面板，用于渐变、固定和视差照片以及 YouTube 视频。示例搭建深蓝色版块，配城市照片、白色文字和顶部渐变。 该视频在版块后添加照片，再用渐变覆盖。 ## 添加颜色和照片 1. 点击空内容区的 **Add Elements**，再选择 **Section**（**Layout** 选项卡中）。 2. 悬停版块，打开 **More > Settings**。 3. 打开 **Style** 面板。 4. 为 **Background** 选择深蓝色色板。 5. 为 **Font color** 选择白色。 6. 在 **Background image** 下点击 **Select Image**。搜索媒体库，勾选照片并点击 **Insert selected**。 7. 将 **Background style** 设为 **Cover**。 8. 将 **Background position** 设为 **Center center**，点击 **Save**。 9. 点击版块上的 **+**，选择 **Text**（**Content** 选项卡中）。 10. 输入标题（例如 `Evening lectures`）和下方一行。将标题设为 **Heading 2**，在编辑器工具栏中将两行居中。 11. 打开 **Style** 面板，将 **Font color** 设为白色，点击 **Save**。 ## 添加渐变 1. 悬停版块，再次打开 **More > Settings**。 2. 打开 **Background effects** 面板，将 **Background effect** 设为 **Gradient**。 3. 选择 **Start color** 和 **End color**，点击 **Save**。 4. 点击工具栏上的 **Save**，打开视图菜单（眼睛图标）并选择 **Preview**。 ## 您会看到的内容 前几步完成后，照片铺满白色标题后的整个版块。**Cover** 裁掉放不下的部分，**Center center** 让照片中间留在视野中。深蓝色只在照片加载时或照片盖不到的地方显示。 渐变从顶部的起始色混合到底部的结束色。它盖在照片上方。不透明颜色完全盖住照片；半透明颜色让照片透出来。 ## 设置 ### Style 面板（每个版块、行、列和元素） | 设置 | 作用 | 默认值 | |---|---|---| | **Background** | 颜色选择器或主题色板的填充色 | 无 | | **Background image** | 图片来自媒体库，选择用 **Select Image** | 无 | | **Background style** | **Cover** 填满元素并裁剪；**Contain** 显示整图，可能留空；**No repeat** 按原尺寸显示一次；**Repeat** 平铺 | **Theme defaults** | | **Background position** | 裁剪时图片的哪部分留在视野中，例如 **Center center** 或 **Left top** | **Theme defaults** | 设置好 AI 图像生成后，**Background image** 也接受提示词。请参阅 [AI 图像生成](/zh-hans/hc/documentation/learn-dxpr-builder/ai/image-generation)。 ### Background effects 面板（仅版块） | 背景效果 | 作用 | 额外设置 | |---|---|---| | **Simple image**（默认） | 照片随页面滚动 | 无 | | **Fixed image** | 照片固定，页面从上方滚过 | 无 | | **Parallax image** | 照片比页面移动得慢。示例见 [主视觉版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section)。 | **Parallax speed**、**Parallax mode**（**Fixed** 或 **Local**）、**Disable on mobile** | | **Gradient** | 两种颜色在版块上混合，有照片时盖在照片上方 | **Start color**、**End color**、**Gradient direction**（180 度为从上到下）、**Start position**、**End position** | | **YouTube video** | 静音 YouTube 视频填满版块；勾选 **Loop** 重复播放 | **YouTube video URL**、**Video options**、**Start time in seconds**、**Stop time in seconds** | 固定和视差效果移动您在 **Style** 面板中设置的照片。YouTube 视频不需要照片。 ## 如果您看不到背景 - **没有 Background effects 面板。** 只有版块有。请悬停版块（不是行、列或元素），打开 **More > Settings**。 - **照片被裁掉了。** **Cover** 裁掉版块放不下的部分。请更改 **Background position** 留住主体，或选择 **Contain**。 - **渐变盖住了照片。** 渐变在上方，不透明颜色盖住照片。请在颜色选择器中降低 **Start color** 和 **End color** 的不透明度。 - **版块没有显示渐变。** 渐变需要两种颜色。请同时选择 **Start color** 和 **End color**。 - **YouTube 视频不播放。** **YouTube video URL** 为空，或不是单个视频的链接。请粘贴视频的完整地址，例如 `https://www.youtube.com/watch?v=` 加其 ID。 ## 接下来做什么？ - [全宽布局](/zh-hans/hc/documentation/learn-dxpr-builder/design/full-width-layouts)：让背景和内容都铺到边缘。 - [动画选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/design/animation-tab)：版块滚动进入视野时淡入文本。 - [主视觉版块](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/hero-section)：用视差照片搭建整页页眉。