超好用的#贴图网站 |【Lorem Picsum】
有没有鱼油为了找一张合适尺寸的图片而费劲心思？！
今天，本人来科普一个好东西：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="">
注意：
**** Hidden Message *****
https://xxx.ilovefishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
https://xxx.ilovefishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） heighy：300px。height 打错了，不二哥{:10_333:} 不知道list怎么不二老师能 解毒 一下吗 {:10_323:} {:10_277:} {:10_277:} 0 https://fishc.com.cn/forum.php?mod=post&action=reply&fid=346&tid=116851 推荐 {:5_95:} Web好好玩
页:
[1]