--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/background' title: '在内容后放置颜色或照片 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:53:11+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 为页面的某个横条设置品牌颜色或照片，使标题突出，并让横条呈现为一个整体。您可以在任何元素的 样式 面板中设置颜色和照片。版块还提供 背景特效 面板，用于固定照片、视差、渐变或 YouTube 视频。 该视频遵循下面的配方：在标题后放置照片，并在照片上叠加深色渐变，使白色标题保持易读。 tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 在内容后放置颜色或照片 description: |- 为页面的某个横条设置品牌颜色或照片，使标题突出，并让横条呈现为一个整体。您可以在任何元素的 样式 面板中设置颜色和照片。版块还提供 背景特效 面板，用于固定照片、视差、渐变或 YouTube 视频。 该视频遵循下面的配方：在标题后放置照片，并在照片上叠加深色渐变，使白色标题保持易读。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:53:11+0000' dateModified: '2026-10-24T17:19:22+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/element-settings/background' articleSection: 设置元素样式 - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/background' description: |- 为页面的某个横条设置品牌颜色或照片，使标题突出，并让横条呈现为一个整体。您可以在任何元素的 样式 面板中设置颜色和照片。版块还提供 背景特效 面板，用于固定照片、视差、渐变或 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 --- [帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[设置元素样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings) # 在内容后放置颜色或照片. 学习 DXPR Builder搭建页面设置元素样式 ## 本指南内容 相关指南 - [调整文本大小与颜色](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography) 为页面的某个横条设置品牌颜色或照片，使标题突出，并让横条呈现为一个整体。您可以在任何元素的 **样式** 面板中设置颜色和照片。版块还提供 **背景特效** 面板，用于固定照片、视差、渐变或 YouTube 视频。 该视频遵循下面的配方：在标题后放置照片，并在照片上叠加深色渐变，使白色标题保持易读。 ## 开始之前 - 在 DXPR Builder 中打开页面；指向元素即会显示其带 **More** 的控制栏。初次使用构建器？请参阅[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)。 - **Save**（对话框中）将更改保留在编辑器中。内容上方构建器工具栏上的 **Save** 会存储页面并显示 "Saved field"。 - **整条横条请使用版块**。只有版块才有 **背景特效**。 - **列内几行文字后的彩色盒子请使用文本或卡片元素**。 - **每页都有的背景（如页面正文或页脚）请使用您的主题**。 - **不要把文字放在照片里。**背景图片没有替代文本，屏幕阅读器会跳过它。请将您的消息放在上方的标题中。 ## 配方：照片上易读的标题 杂乱照片上的白色文字难以阅读。照片上的深色渐变可以解决这个问题，更换照片后依然有效。您需要一个版块，在文本元素中容纳标题。 1. 悬停在 **版块** 上，点击 **More**，再点击 **Settings**。 2. 打开 **样式** 面板，在 **Background image** 下点击 **Select Image**。选择一张照片。随即出现缩略图及图像尺寸列表。 3. 在图像尺寸列表中，选择至少与您设计的最宽屏幕等宽的尺寸，或 **Original image (No resizing)**。整条横条请避免使用 **Optimize for fast loading**。 4. 将 **Background style** 设为 **Cover**，将 **Background position** 设为 **Center center**。 5. 打开 **背景特效** 面板，将 **Background effect** 设为 **Gradient**。您的照片保留；渐变叠加其上。 6. 在 **Start color** 的颜色字段中输入 `rgba(0, 0, 0, 0.6)`：即 60% 的黑色。输入 `rgba(0, 0, 0, 0.3)` 作为 **End color**。**Gradient direction** 保持 180，使罩纱从上到下。 7. 点击对话框中的 **Save**。该版块显示深色罩纱下的照片。 8. 悬停在 **文本** 元素上，点击 **More**，再点击 **Settings**。在其 **样式** 面板中，将 **Font color** 设为白色，点击 **Save**。 9. 点击工具栏上的 **Save**。 对照照片最亮的部分检查标题。对比度至少达到 4.5 比 1，大标题至少 3 比 1；[排版](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography)页面解释了这些目标。仍然难读？请调高两个值，例如调到 0.8 和 0.5。 ## 您会看到的内容 该版块显示深色罩纱下的照片，顶部最暗，白色标题在上。**Cover** 会填满整个版块，因此在窄屏幕上照片两侧会被裁掉更多。 ## 设置的工作原理 | 控件 | 作用 | |---|---| | **Background** | 内容后的颜色。选择器的不透明度滑块可使其透明。 | | **Background image** | 内容后的图片：来自 **Select Image**、来自 URL，或来自 **AI Image Generation**（除非您的站点关闭了它）。 | | **Background style** | 图片填充元素的方式。请参阅下表。 | | **Background position** | 图片固定的基准点。使用 **Cover** 时，它决定照片的哪部分保持可见。 | | **Background style** | 效果 | |---|---| | **Theme defaults** | 除非您的主题另有说明，图片按自身尺寸从左上角开始重复。 | | **Cover** | 图片填满元素，不合适的边缘会被裁掉。最适合照片。 | | **Contain** | 完整显示整个图片一次。两侧可能留有空白横条。最适合徽标。 | | **No repeat** | 按自身尺寸显示一份。 | | **Repeat** | 图片在元素上平铺。适合图案。 | 颜色位于图片之下。它会透过图片的透明部分、**Contain** 图片周围的横条显示，也会在照片加载时显示。请选择接近照片主色调的颜色。 尺寸 **Optimize for fast loading** 会将图片缩小到至多 1024 px 宽，并存为 WebP。适合小盒子，但在大屏幕的整条横条上会显得模糊。 所有屏幕尺寸加载同一张图片，包括手机。**悬停样式** 面板有自己的 **Background** 和 **Background image**，因此盒子可以在悬停时变色或更换图片。 ## 版块背景特效 这些特效需要版块。**Fixed image** 和 **Parallax image** 会移动来自 **Background image** 的照片，因此请先设置照片。 | **Background effect** | 访问者看到的效果 | 设置 | |---|---|---| | **Simple image** | 照片随页面滚动。这是默认值。 | 无 | | **Fixed image** | 内容滚动时照片保持不动。 | 无 | | **Parallax image** | 照片比内容滚动得慢。 | **Parallax speed**（0 到 100；选择 **Parallax image** 后若为 0 则设为 20）、**Parallax mode**（**Fixed** 或 **Local**）、**Disable on mobile**（宽 481 px 以下的屏幕） | | **Gradient** | 两种颜色的混合，可单独使用或叠加在照片上。 | **Start color**、**End color**、**Gradient direction**（1 到 360 度；180 为从上到下）、**Start position**、**End position** | | **YouTube video** | 版块在屏幕上时播放静音视频，滚走时暂停。 | **YouTube video URL**、**Start time in seconds**、**Stop time in seconds**、**Video options** | 在照片上，渐变总是从一边延伸到另一边。**Start position** 和 **End position** 仅适用于没有照片的渐变。 ## 如果您没有看到背景 - **照片显示为细条。**背景不增加高度；版块与其内容和内边距等高。请添加内容，或在 **常规** 面板中开启 **100% height**。要增加内边距，请参阅[更高的版块](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/spacing#recipe-a-taller-section)。 - **照片重复或只显示一角。** **Background style** 为 **Theme defaults**。请选择 **Cover**。 - **照片在宽屏幕上显得模糊。** **Optimize for fast loading** 使其至多 1024 px 宽。请在图像尺寸列表中选择更宽的尺寸。 - **照片藏在纯黑之后。**渐变颜色没有透明度。请让每个值以小于 1 的数字结尾，例如 `rgba(0, 0, 0, 0.6)`。 - **标题仍然是深色的。**文本元素的 **HTML classes** 下有颜色类，或主题规则带 `!important`，优先级更高。请移除该标签，或参阅[排版](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography)。 - **页面重新加载后背景消失了。** **Save**（对话框中）只将更改保留在编辑器中。请点击工具栏上的 **Save**。 - **颜色不显示。**照片盖住了它。要在照片上加色调，请使用 **Gradient**（在 **背景特效** 中）。 - **Start position 和 End position 没有任何变化。**该版块有 **Background image**，因此渐变从一边延伸到另一边。请改用 **Gradient direction** 和透明颜色。 - **类颜色优先。**例如 **Primary background**（**HTML classes** 下）等类优先于您的 **Background**。请移除其标签。 - **Background** 对环形计数器、进度条或分隔线无效。这些元素使用自己的颜色。请在 **常规** 面板中设置 **Background color**、**Back color** 或 **Color**。 ## 接下来做什么？ - [排版](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/typography)：设置照片上标题的颜色并检查其对比度。