# 图片横幅

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

### **配置选项**

1. **启用全宽**

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

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

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

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

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

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

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

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

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

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

### **常见问题**

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

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