在内容后放置颜色或照片.
为页面的某个横条设置品牌颜色或照片，使标题突出，并让横条呈现为一个整体。您可以在任何元素的 样式 面板中设置颜色和照片。版块还提供 背景特效 面板，用于固定照片、视差、渐变或 YouTube 视频。
该视频遵循下面的配方：在标题后放置照片，并在照片上叠加深色渐变，使白色标题保持易读。
开始之前
- 在 DXPR Builder 中打开页面；指向元素即会显示其带 More 的控制栏。初次使用构建器？请参阅您的第一页。
- Save（对话框中）将更改保留在编辑器中。内容上方构建器工具栏上的 Save 会存储页面并显示 "Saved field"。
- 整条横条请使用版块。只有版块才有 背景特效。
- 列内几行文字后的彩色盒子请使用文本或卡片元素。
- 每页都有的背景（如页面正文或页脚）请使用您的主题。
- 不要把文字放在照片里。背景图片没有替代文本，屏幕阅读器会跳过它。请将您的消息放在上方的标题中。
配方：照片上易读的标题
杂乱照片上的白色文字难以阅读。照片上的深色渐变可以解决这个问题，更换照片后依然有效。您需要一个版块，在文本元素中容纳标题。
- 悬停在 版块 上，点击 More，再点击 Settings。
- 打开 样式 面板，在 Background image 下点击 Select Image。选择一张照片。随即出现缩略图及图像尺寸列表。
- 在图像尺寸列表中，选择至少与您设计的最宽屏幕等宽的尺寸，或 Original image (No resizing)。整条横条请避免使用 Optimize for fast loading。
- 将 Background style 设为 Cover，将 Background position 设为 Center center。
- 打开 背景特效 面板，将 Background effect 设为 Gradient。您的照片保留；渐变叠加其上。
- 在 Start color 的颜色字段中输入
rgba(0, 0, 0, 0.6)：即 60% 的黑色。输入rgba(0, 0, 0, 0.3)作为 End color。Gradient direction 保持 180，使罩纱从上到下。 - 点击对话框中的 Save。该版块显示深色罩纱下的照片。
- 悬停在 文本 元素上，点击 More，再点击 Settings。在其 样式 面板中，将 Font color 设为白色，点击 Save。
- 点击工具栏上的 Save。
对照照片最亮的部分检查标题。对比度至少达到 4.5 比 1，大标题至少 3 比 1；排版页面解释了这些目标。仍然难读？请调高两个值，例如调到 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。要增加内边距，请参阅更高的版块。
- 照片重复或只显示一角。 Background style 为 Theme defaults。请选择 Cover。
- 照片在宽屏幕上显得模糊。 Optimize for fast loading 使其至多 1024 px 宽。请在图像尺寸列表中选择更宽的尺寸。
- 照片藏在纯黑之后。渐变颜色没有透明度。请让每个值以小于 1 的数字结尾，例如
rgba(0, 0, 0, 0.6)。 - 标题仍然是深色的。文本元素的 HTML classes 下有颜色类，或主题规则带
!important，优先级更高。请移除该标签，或参阅排版。 - 页面重新加载后背景消失了。 Save（对话框中）只将更改保留在编辑器中。请点击工具栏上的 Save。
- 颜色不显示。照片盖住了它。要在照片上加色调，请使用 Gradient（在 背景特效 中）。
- Start position 和 End position 没有任何变化。该版块有 Background image，因此渐变从一边延伸到另一边。请改用 Gradient direction 和透明颜色。
- 类颜色优先。例如 Primary background（HTML classes 下）等类优先于您的 Background。请移除其标签。
- Background 对环形计数器、进度条或分隔线无效。这些元素使用自己的颜色。请在 常规 面板中设置 Background color、Back color 或 Color。
接下来做什么？
- 排版：设置照片上标题的颜色并检查其对比度。