自适应图片的焦点

您可以设置一个焦点,以确保图片的主要部分不会被剪裁掉。焦点特别适用于自适应布局(同一图片可能以不同的尺寸显示)。

焦点

背景图片的焦点

当您将某张图片设为背景图片时,焦点可能会非常有用。将图片宽度和高度设为 100%,然后设置焦点,可确保图片中最重要的部分始终可见,无论元素大小如何。

焦点的使用限制:

  • 图片缩放比例类型 -“缩放比例”属性必须设为剪裁图片,使之铺满整个空间
  • 图片来源类型 - 来源必须是本地,而不能是外部网址。
  • 动态广告 - 动态广告不支持焦点。
  • 动画 - 无法为焦点添加动画效果。如果您制作了图片大小随时间变化的动画效果,那么您为此图片设置的焦点将适用于初始图片大小。

启用焦点会使对齐方式选项失效。

设置焦点

  1. 通过以下任一方法打开修改图片焦点对话框:
    • 在场景中选择相应图片,然后在属性面板中点击启用焦点复选框。
    • 右键点击相应图片,然后从弹出式菜单中选择设置焦点…
  2. 将焦点拖动到所需位置。
    • 默认情况下,焦点位于图片的中心位置。
    • 焦点控件显示为一个白色圆圈,以便于查看和点击,而中间的十字线则表示实际焦点。
    • 使用键盘上的箭头键可将焦点一次移动 1 个像素的距离。
    • 您可以通过以下方式将焦点重置到中心位置:右键点击相应图片,然后从弹出式菜单中选择重置;或者按 Ctrl+R (Windows) 或 +R (Mac)。
  3. 要查看对于不同的图片宽高比,焦点对图片剪裁有何影响,请切换到预览标签。
  4. 点击确定

如果您更改图片来源,Google Web Designer 会询问您是要保留、修改还是舍弃焦点。

修改焦点

您可以更改现有焦点的位置:

  1. 使用以下任一方法打开修改图片焦点对话框:
    • 右键点击相应图片,然后从弹出式菜单中选择修改焦点…
    • 选择相应图片,然后在“属性”面板中点击启用焦点复选框旁边的设置焦点位置按钮
  2. 将焦点拖动到新位置。
  3. 点击确定

启用/停用焦点

您可以停用焦点,看看采用对齐方式选项时的图片显示效果。如果您重新启用焦点,Web Designer 会记得您先前设置的焦点位置。

使用以下任一方法为所选图片启用/停用焦点:

  • 在“属性”面板中点击启用焦点复选框。
  • 右键点击相应图片,然后从弹出式菜单中选择启用焦点停用焦点

移除焦点

  1. 右键点击相应图片。
  2. 从弹出式菜单中选择移除焦点

更换设有焦点的图片

当您使用更换图片… 功能或为启用了焦点的图片更改来源时,可以决定在新图片中是保持相同的焦点、修改焦点还是舍弃焦点。

焦点和媒体规则

您无法使用媒体规则更改焦点的位置。如果您想根据视口尺寸显示不同的图片,但这些图片不能使用同一个焦点,则可以将两张图片都添加到文档中,然后利用媒体规则针对各个视口尺寸将不应显示的图片的不透明度更改为 0。

代码视图中的焦点

在代码视图中,您可以在 gwd-image 元素的 focalpoint 属性中设置焦点坐标。例如:

<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>
该内容对您有帮助吗?
您有什么改进建议?

需要更多帮助?

登录可获取更多支持选项,以便快速解决您的问题