|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
有没有鱼油为了找一张合适尺寸的图片而费劲心思?!
今天,本人来科普一个好东西:Lorem Picsum(传送门)
基于上面的在线贴图网站,制作了:106-纯CSS的3D选项卡鱼油可以自行拓展一下~
Lorem Picsum提供了大量高清的图片,我们只要在div或者img中按照一定的语法要求进行调用即可加载。
我们先创建一个最简单的img元素:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
- <meta name="description" content="《零基础入门学习Web开发》案例演示">
- <meta name="author" content="鱼C工作室">
- <title>鱼C-实用系列</title>
- </head>
- <body>
- <img src="" alt="">
- </body>
- </html>
复制代码
lorem自带了一个图片列表库,我们输入选择想要的图片,利用ID进行调用:
(图片列表:传送门)
假如我们选中了#1027的美女图片
然后只需要在src中输入lorem的地址便能调用:
- <img src="https://picsum.photos/500?image=1027" alt="">
复制代码
最常用的就是人工指定宽高:
- https://picsum.photos/200/300
复制代码
加载图片尺寸,width:200px;height:300px。
示例:
- <img src="https://picsum.photos/222/200" alt="">
复制代码
加载一张宽度为222px,高度为200px的图片。
如果只写一个参数:
- https://picsum.photos/200
复制代码
加载图片尺寸,宽高均为200px。
还可以随机加载:
- https://picsum.photos/200/300/?random
复制代码
每次刷新图片都会变换。
还可以加载灰度图片:
- https://picsum.photos/g/200/300
复制代码
记住/g必须写在尺寸的前面,写在其他地方都无法被正确识别哦~
修改上面1027的图片:
- <img src="https://picsum.photos/g/500?image=1027" alt="">
复制代码
还可以输入一张模糊的照片:
- <img src="https://picsum.photos/333/600/?blur" alt="">
复制代码
注意:
输入模糊的照片,会按照设置的图片尺寸调用相应的图片。
?blur必须写在末尾
还可以按照照片中心走向进行呈现:
- <img src="https://picsum.photos/555/?gravity=west" alt="">
复制代码
注意:
如果喜欢,别忘了评分 :
这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑☞( 传送门)( 不喜欢更要订阅 ) |
评分
-
查看全部评分
|