鱼C论坛

 找回密码
 立即注册
查看: 213|回复: 1

[系列教程] 实用Tips - 32 - 超好用的#贴图网站 |【Lorem Picsum】

[复制链接]
最佳答案
199 
发表于 2018-6-11 16:03:09 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2018-6-12 08:31 编辑

Snip20180611_44.png


有没有鱼油为了找一张合适尺寸的图片而费劲心思?!

今天,本人来科普一个好东西:Lorem Picsum传送门

基于上面的在线贴图网站,制作了:106-纯CSS的3D选项卡鱼油可以自行拓展一下~

Lorem Picsum提供了大量高清的图片,我们只要在div或者img中按照一定的语法要求进行调用即可加载。

我们先创建一个最简单的img元素:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  7.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  8.     <meta name="author" content="鱼C工作室">
  9.     <title>鱼C-实用系列</title>
  10. </head>
  11. <body>
  12. <img src="" alt="">
  13. </body>
  14. </html>
复制代码


lorem自带了一个图片列表库,我们输入选择想要的图片,利用ID进行调用:
(图片列表:传送门
Snip20180611_47.png


假如我们选中了#1027的美女图片

然后只需要在src中输入lorem的地址便能调用:
  1. <img src="https://picsum.photos/500?image=1027" alt="">
复制代码

Snip20180611_50.png





最常用的就是人工指定宽高
  1. https://picsum.photos/200/300
复制代码


加载图片尺寸,width:200px;height:300px。

示例:
  1. <img src="https://picsum.photos/222/200" alt="">
复制代码

Snip20180611_57.png


加载一张宽度为222px,高度为200px的图片。

如果只写一个参数:
  1. https://picsum.photos/200
复制代码


加载图片尺寸,宽高均为200px。

还可以随机加载
  1. https://picsum.photos/200/300/?random
复制代码


每次刷新图片都会变换。

还可以加载灰度图片:
  1. https://picsum.photos/g/200/300
复制代码


记住/g必须写在尺寸的前面,写在其他地方都无法被正确识别哦~

修改上面1027的图片:
  1. <img src="https://picsum.photos/g/500?image=1027" alt="">
复制代码

Snip20180611_51.png


还可以输入一张模糊的照片:
  1. <img src="https://picsum.photos/333/600/?blur" alt="">
复制代码

Snip20180611_52.png


注意:
输入模糊的照片,会按照设置的图片尺寸调用相应的图片。

?blur必须写在末尾


还可以按照照片中心走向进行呈现:
  1. <img src="https://picsum.photos/555/?gravity=west" alt="">
复制代码

Snip20180611_55.png


注意:
游客,如果您要查看本帖隐藏内容请回复






                               
登录/注册后可看大图


如果喜欢,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +2 收起 理由
睦ちゃん她爹 + 5 + 5 + 2 无条件支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

最佳答案
0 
发表于 2018-6-11 21:42:15 | 显示全部楼层
heighy:300px。height 打错了,不二哥

评分

参与人数 1鱼币 +3 收起 理由
不二如是 + 3 鱼C有你更精彩^_^

查看全部评分

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-8-22 08:26

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表