参考：

Figma Tutorial: Images

3 Ways to Insert Image

1. rectangle / frame + fill

画一个 rectangle / frame 然后去 fill 选择 image then browse an image to insert.

注: rectangle 就是 HTML 的 <img>, frame 就是 HTML 的 div + background-image

2. ctrl + shift + k

使用 keyboard shortcut 可以快速实现第 1 个 way

3. drag & drop, copy & paste

图片配置

Fill 是 css 的 cover (填满框, 牺牲图片的内容)

Fit 是 css 的 contain (保留所有图片内容, 让框留白)

Crop 是截图咯

Tile 是重复图片填满框

右边是旋转

下半段的配置就是亮度, 倒影等等了

Figma 学习笔记 – Image的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信（消息）

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. 2024-07-17：用go语言，给定一个整数数组nums， 我们可以重复执行以下操作： 选择数组中的前两个元素并删除它们， 每次操作得到的分数是被删除元素的和。 在保持所有操作的分数相同的前提下，

    2024-07-17:用go语言,给定一个整数数组nums, 我们可以重复执行以下操作: 选择数组中的前两个元素并删除它们, 每次操作得到的分数是被删除元素的和. 在保持所有操作的分数相同的前提下, ...

  2. [oeasy]python0010_hello_world_unix_c历史迷因

    ​ Hello World! 回忆上次内容 我们这次设置了断点 设置断点的目的是更快地调试 调试的目的是去除 ​​bug​​ 别害怕 ​​bug​​ 一步步地总能找到 ​​bug​​ 这就是程序员基本 ...

  3. 学习笔记--区分Java中类与对象

    区分Java中类与对象 你能接受 String 吗? 如果能,以下内容可进行类比 编写 User 类 public class User{ // 用户编号 // int 是一种基础数据类型 // id ...

  4. Microsoft Dynamics CRM 365/2016 配置POP3/STMP邮箱（附例）

    前期准备: 必须支持pop3/stmp的邮箱 以下用网易163邮箱做的测试,注意开通了独立安全码,非邮箱登录密码 1.打开设置>>电子邮件配置 2.新建电子邮件配置 pop3/smtp 3 ...

  5. 青少年CTF擂台挑战赛 2024 #Round 1

    青少年CTF擂台挑战赛 2024 #Round 1 crypto 1.解个方程 题目: 欢迎来到青少年CTF,领取你的题目,进行解答吧!这是一道数学题!! p = 474356125652182661 ...

  6. .NET8 Blazor 从入门到精通：（一）关键概念

    目录 Blazor 的关键概念 项目模板 Razor 语法 依赖注入 注入配置 HeadOutlet 组件 @code 分离 Blazor 调试 CSS 隔离 调用JavaScript 最近在学习 B ...

  7. 【Git】03 撤销 & 版本回退

    回退分为三种情况,每种情况对应了我们文件的存储区域 工作区 | 暂存区 | 版本区(当前分支) 1.文件可能存放在工作区,没有被Git追踪[红色标记状态] 2.文件可能已经添加到暂存区,没有被Git提 ...

  8. .Net内存管理释放的两种方式

    在.Net中,资源回收主要是指内存管理和非托管资源的释放.分别提供了两种主要的方式进行处理: 垃圾回收(GC) 确认性资源释放(DRD) 官网相关文档的链接:https://learn.microso ...

  9. 从markdown引擎实现的角度看markerdown到底是什么?

    引用百度百科的解释: 链接:https://baike.baidu.com/item/markdown/3245829 Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Grub ...

  10. 不同浏览器input file样式不一样

    在开发项目过程中会碰到不同浏览器input file样式不一样. 经过分析,打算都用IE上面的附件上传样式,  方案如下: 1.在IE下截个如上面的上传按钮,并保存. 2.判断浏览器类型,如果是非IE ...