# 图片横幅

图片横幅模块用于在网站中添加一个全宽或固定宽度的横幅图片，可用于展示促销、产品或品牌信息。此模块提供了丰富的配置选项，帮助您自定义图片的显示效果和内容样式。

### **配置选项**

1. **启用全宽**

   **用途**：决定横幅图片是否占据页面的全宽。如果未选中，图片将根据其内容宽度进行显示。
2. **图片设置**
   * **图片**：上传或选择要在横幅中显示的图片。
   * **图片覆盖不透明度**：通过调整不透明度，可以为图片添加透明的覆盖层，增强文字可读性。
   * **图片高度**：选择横幅图片的高度，可以设置为自适应、小、中或大，确保图片比例与整体设计协调。
   * **适应透明页眉**：启用此选项可以为透明页眉添加顶部填充，以防止内容重叠。
3. **内容设置**
   * **配色方案**：选择横幅内容的配色方案，确保与背景图片和整体页面设计相匹配。
   * **位置**：设置内容在横幅中的对齐位置（例如右下角）。
4. **其他设置**
   * **显示内容框**：勾选此选项以在图片上显示一个内容框，内含文字或其他内容。
   * **内容框不透明度**：调整内容框的不透明度，确保文字与背景的对比度合适。
   * **启用模糊效果**：为内容框添加模糊背景效果，以突出显示文字内容。
   * **文本对齐**：设置内容框中文本的对齐方式（左对齐、居中或右对齐）。
5. **动画设置**

   **图片行为**：选择图片的动画效果，支持的滚动效果有

   * 环境移动
   * 固定背景位置
   * 滚动时放大
   * 视差滚动
6. **移动端设置**

   **移动端封面图片**：上传或选择在移动设备上显示的封面图片，以确保在不同设备上都有最佳显示效果。
7. **SEO优化**

   **作为首屏主要区域**：如果设置为首屏的主要区域，将进行优化以提高SEO得分，确保搜索引擎能够更好地识别和抓取页面内容。

### **可添加的块**

图片横幅模块支持添加多种类型的内容 Block，您可以根据需要选择合适的 Block 来丰富横幅的内容展示。以下是支持的 Block 类型：

1. **小标题**
   * 用途：添加一个小型标题，用于突出次要信息或作为主要标题的补充。
2. **标题**
   * 用途：添加一个主要标题，用于突出展示重要信息。
   * 设置选项：可调整标题的字体大小，并支持全大写格式。
3. **文本**
   * 用途：添加文本描述，用于详细说明横幅中的信息或提供额外的内容。
   * 设置选项：支持富文本编辑，可以设置文本的样式、颜色、链接等。
4. **按钮**
   * 用途：添加交互式按钮，引导用户执行特定操作（如“了解更多”或“立即购买”）。
   * 设置选项：可自定义按钮的文本、链接、样式（如实心、边框、浮动）。

### **使用注意事项**

* **全宽与非全宽**：选择是否启用全宽取决于横幅图片的用途，全宽效果适合需要吸引用户注意的大幅视觉展示。
* **图片覆盖层**：通过调整覆盖层的不透明度，可以平衡背景图片与前景文字的可读性，确保信息传达清晰。
* **动画效果**：适度使用动画可以增加页面动态感，但需避免过度使用，以防干扰用户体验。

### **常见问题**

* **图片显示不全**：检查图片高度设置，确保图片的比例适应横幅的尺寸。
* **文字不清晰**：尝试调整内容框不透明度或启用模糊效果，以增强文字与背景的对比度。
* **移动端显示问题**：在移动端设置中选择适合的小图片，确保在不同设备上都有最佳的视觉效果。

这样设置后，您的图片横幅将具备出色的视觉效果，并且能够在不同设备上保持一致的用户体验。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ascent.webvista.studio/webvista-studio-docs/sections/tu-pian-heng-fu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.