马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-6-11 16:03:09
置顶卡
千斤顶
显身卡
发表于 2018-6-11 21:42:15
楼主