图片元素是您可以插入到画布上的图像占位符,与其他元素分开。请记住,图片元素不同于应用于元素(如部分或 div 块)的背景图像。
在本教程中,您将发现:
- 插入图片的方法
- 调整图片设置的技巧
- 替换图片的步骤
- 图片样式设置方法
- 添加替代文本的说明
如何插入图片
您可以从以下位置插入图片到您的 Webflow 站点:
- 插入面板
- 资源面板
- 快速搜索
- 你的设备
笔记: 图片的最大文件大小为 4MB。
有价值的信息: 当您将图片上传到资源面板时,Webflow 会生成图片的响应式变体。不过,我们建议您在将图片上传到 Webflow 之前对其进行优化。了解有关图片分辨率的更多信息。
阅读互联网上最常用的图片文件格式。
插入面板
要从插入面板插入图片元素:
- 导航至 插入面板
- 点击并拖动 图片 元素拖到 Webflow 画布上
要使用您的某个图片文件替换占位符,请执行以下操作:
- 选择 图片 画布上的元素
- 访问 元素设置面板
- 选择 选择图片
- 选择之前上传的图片或点击“云”图标可上传新图片 资源面板
资源面板
一旦你将照片上传到 资源面板,您可以将图片拖拽到画布上。
您可以通过 3 种方式将图片上传到资源面板:
- 点击 ”云”图标 资源面板 并从您的设备中选择要上传的图片
- 将设备中的图片拖放到 资源面板
- 将图片直接拖放到画布上
了解有关如何将图片插入资源面板的更多信息。
快速搜索
快速搜索是 Webflow Designer 中内置的一个功能强大的搜索栏。您可以使用 命令 + 埃 (在 Mac 上)或 控制 + 埃 (在 Windows 上)并按名称搜索您已上传到资源面板的任何图片。
你的设备
您可以将图片直接从设备拖到画布上。
如何解决图片上传问题
如果您在尝试上传图片时收到“上传失败”警报,请检查以下内容:
- 图片文件:确保图片文件未损坏、具有正确且受支持的文件扩展名,并且不大于 4MB
- 检查你的互联网连接:即使互联网连接速度较慢(最低 5 mbps),您也应该能够上传图片。为确保互联网速度没有问题,请仔细检查您的互联网连接并确认信号强度。了解如何排除互联网连接故障。
- 检查你的浏览器扩展:某些浏览器扩展程序可能会在将图片上传到 Webflow Designer 时导致问题。尝试从隐身或私人浏览窗口上传图片,或了解如何排除浏览器扩展程序故障。
如何调整图片设置
要访问图像设置,有四种方法可用。首先,选择画布上的图像组件,然后:
- 双击图像组件
- 打 进入/返回 键盘上的键
- 单击图像组件标签旁边的类似“齿轮”的图标
- 按 德 或导航至 元素设置面板
之内 图像设置,您有能力:
- 选择图片 — 使用任意图片替换默认占位符 资源面板。只需双击图像组件并选择 选择图片 来自 图像设置 窗户
- 调整图像尺寸 — 为图片的宽度或高度指定特定的像素值。这些尺寸将应用于所有断点,但宽度和高度的单独设置可以覆盖 元素设置面板 对于每个断点。您还可以选择通过拖动图像的角来调整图像大小。请注意,调整图像大小不会超出其父元素的尺寸
- 为图像启用 HiDPI 模式 — 勾选此框后,图片的像素宽度将减半。例如,宽度为 600px 的图片将显示为 300px。此像素密度可确保在大多数 HiDPI 移动显示屏上获得最佳图像质量
- 指定加载行为— 修改图像加载首选项。“延迟”加载会在页面加载时加载可见折叠上方的图像,并在用户滚动到折叠下方的图像时加载它们;“急切”加载会在网站加载期间立即加载页面上的所有图像;“自动”加载会根据浏览器的设置进行调整
替换图像内容
将图像插入画布后,您可以根据需要灵活地替换它。要替换图像:
- 在画布上突出显示图像
- 导航至 元素设置面板 > 图像设置
- 选择 替换图片 打开 资源面板
- 选择现有图像或上传新图像
增强图像美感
利用 样式面板 以增强图像的视觉吸引力。请注意,某些样式属性不适用于图像,例如背景样式。对于图像的叠加效果,请考虑使用背景图像。
利用类来对图像进行样式化,这样可以优化时间效率,因为您可以将一个类应用于多幅图像。应用于该类的任何样式都会影响与其相关的所有图像。这种方法在通过以下方式建立尺寸规范时特别有利: 样式面板 而不是 元素设置面板。通过利用类,您可以省去手动调整每幅图像大小的麻烦。
以下是一些可用于为您的图像增添光彩的样式属性示例:
- 圆角半径: 在一侧或多侧实现圆角。要定义半径,请访问 样式面板 > 边界 > 半径.
- 阴影: 创建阴影效果以增强图像的外观。要设置阴影,请访问 样式面板 > 效果 > 盒子阴影.
- 筛选器: 应用各种滤镜,如模糊、灰度或棕褐色调。要添加滤镜,请导航至 样式面板 > 效果 > 筛选器.
添加替代文本
描述性文字是对隐藏在图片“内部”的图片的简洁描述(与标题不同,它不显示在网站页面上),用于在无法显示或查看图片时解释图片。这有助于有视力障碍或失明的人理解您的图片内容,或者在图片文件未加载或用户选择不查看图片时显示替代文本。搜索引擎使用替代文本来识别图片的内容。
要在图像中引入替代文本:
- 选择画布上的图片
- 访问 元素设置面板 > 图像设置
- 继续 替代文本 并选择 自定义描述
- 在下拉菜单下方的空间中构建替代文本
如果图像仅仅是装饰性的(即,它没有提供任何有价值的信息),你也可以选择 装饰性的 从替代文本下拉菜单中。
您还可以在 资源面板 这样,每次您从“资产”面板将图像附加到您的网站时,该图像都会配备替代文本。
实现动态替代文本
您可以在动态收藏列表和收藏模板页面中使用图像元素。了解有关图像字段的更多详细信息。
为这些图像配置动态替代文本:
- 选择 图像
- 导航至 元素设置面板 > 图像设置
- 核实 从以下位置获取替代文本
- 选择包含图像替代文本的部分(例如“名称”)
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日