# 图片对比横幅

图像对比横幅用于展示两张不同的图像，以便用户可以通过滑动对比图像之间的差异。此功能适用于展示产品的“前后对比”效果，例如产品升级、改造或清洁前后的效果对比。

### **配置选项**

1. **启用全宽**
   * **用途**: 启用后，横幅将占据页面的全宽，提供更具视觉冲击力的效果。
2. **图像高度**
   * **用途**: 设置横幅的图像高度，以像素为单位，调整横幅的视觉大小。
3. **对比方向**
   * **用途**: 选择图像对比的方向。
     * **水平对比**: 左右滑动对比图像。
     * **垂直对比**: 上下滑动对比图像。

### **之前的设置**

1. **之前的图像**
   * **用途**: 上传或选择对比前的图像。这个图像将显示在滑动器的一侧。
2. **之前的标题**
   * **用途**: 为之前的图像添加标题，如“Before”。
   * **标题颜色**: 设置标题的颜色，以确保在图像上可清晰辨认。

### **之后的设置**

1. **之后的图像**
   * **用途**: 上传或选择对比后的图像。这个图像将显示在滑动器的另一侧。
2. **之后的标题**
   * **用途**: 为之后的图像添加标题，如“After”。
   * **标题颜色**: 设置标题的颜色，以确保在图像上可清晰辨认。

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

* **图像选择**: 确保上传的图像具有相同的分辨率和比例，以获得最佳的对比效果。
* **标题颜色**: 在选择标题颜色时，建议与图像背景形成对比，以增强可读性。

### **常见问题**

1. **对比滑动器不工作**: 请确保图像已正确上传，且浏览器支持相关功能。
2. **标题不清晰**: 可能需要调整标题颜色或重新选择更合适的图片。


---

# 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-dui-bi-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.