placehold.it-在线图片生成器

  placehold的介绍

  当我们进行网页设计时,经常会使用各种尺寸的图片。有时候我们用一个固定宽和高的div来进行代替,可是这样的效果不是很明显,而且还要进行各种各样的文字说明;或者我们得从网上寻找各种尺寸的图片然后上传上去,比较麻烦。此时如果有了placehold,就不用那么的麻烦了。placehold能够根据用户的需要生成各种尺寸的图片,同时配上自己的文字,而且还能根据自己的需要修改图片的背景颜色和文字颜色。

当然,此时肯定会有很多人说,dummyimage也是提供一模一样的功能的,可是很可惜,我们的梯子不够高。在我寻找dummyimage的替代工具时,无意间看到了placehold.it这个网站,虽然使用起来没dummyimage那么顺手,但是了解之后其实也蛮不错的。

  placehold的使用

  上面简单的介绍了下placehold,现在来说下这个是如何使用的。

  格式说明

  首先来简单的说下这个网站中图片的地址格式:

http://www.placehold.it/widthxheight/bgcolor/textcolor[&text=hello+world]

  组成说明:
  1. http://www.placehold.it: 网站地址。
  2. widthxheight: 图片的宽(width)和高(height),注意width和height的中间是x,而不是*,如350x200;同时,height可以缺省,那么就默认height=width,此时生成的是边长为width的正方形图片。
  3. bgcolor: 图片的背景颜色,值为6位的16进制数字,如ffffff, 7d7d7d等。
  4. textcolor: 文字的颜色,可以单独缺省,也可以与bgcolor同时缺省,值与bgcolor相同。
  5. &text=hello+world: 如果想要在图片上添加文字的话,那么就在整个url的最后追加上&text=文字,如果文字中间有空格的话,用+代替;该字段可以缺省,默认显示的是图片的宽和高。

  需要特别注意的是:

  * widthxheight必须是第一个参数;
  * bgcolor/textcolor中,两个参数必须连着,中间不能不能插入其他的参数;
  * &text= 如果有的话,必须是最后一个参数。

  例如:http://www.placehold.it/350x150/ 
  

  http://www.placehold.it/350x150/8B7355/B23AEE/
  

  http://www.placehold.it/350x150/8B7355/B23AEE/&text=love+wenzi
  

  

  图片的格式后缀

  图片有着各种各样的格式后缀:.gif, .jpeg, .jpg, png等。placehold也能添加图片的格式后缀,这些可以后缀可以添加到 widthxheight, bgcolor或textcolor的任意一个参数后面,如:

http://www.placehold.it/350x150.png/8B7355/B23AEE/
http://www.placehold.it/350x150/8B7355.gif/B23AEE/
http://www.placehold.it/350x150/8B7355/B23AEE.jpg/

  最后提供一个颜色表,搭配自己喜欢的颜色:http://www.114la.com/other/rgb.htm

  原文地址:http://www.xiabingbao.com/f2e/2015/03/12/placehold-introduce/

时间: 2024-10-12 01:15:27

placehold.it-在线图片生成器的相关文章

placehold.it-在线图片生成器(转载)

做网站的时候 如果 有的产品等客户没有上传图片,可以用这个网站生成的图片 并配以文字进行图片的占位 以免造成页面的空挡或者页面错位等 原文地址:http://www.cnblogs.com/xumengxuan/p/4334082.html 官方网址:http://www.placehold.it/

本地与在线图片转Base64及图片预览

查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src = this.files[0]; var self = $(this); var read = new FileReader(); read.onload = function(e) { var html = "<img src=" + e.target.result + "

在线图片上传 POST文件

在线图片上传 POST文件  在线图片上传 POST文件

h5实现朋友圈点赞图片生成器

经常有各种朋友圈集赞活动,令人烦不胜烦.因此开发了一个朋友圈点赞图片生成器, 方便有需要的人薅商家羊毛. 实现方式并不是直接生成了图片,而是利用html5实现的高仿朋友圈界面, 可任意指定点赞数.图片,文字等均可编辑修改.稍微修改成想要的样子,然后截图即可. 部分代码参考网上内容,用微信打开此链接 http://www.shenhuaxin168.com/?_easy=su.common.index.zan 或者扫一扫体验

在线图片压缩方法介绍

我们需要做的是将这些大的图片进行在线压缩,将图片在线压缩的小一点,那么我们是怎么进行在线压缩的呢?下面小编就给大家简单介绍一下. 步骤一:我们在浏览器上搜索迅捷在线压缩进入到在线图片压缩中,我们需要将压缩的图片准备好放在桌面上:步骤二:找到在线图片压缩,然后我们可以点击进入立即使用,就可以进行图片的压缩:步骤三:图片选择之前我们可以设置一下压缩设置的质量和类型等:步骤四:将图片文件选择到界面中,拖动或者点击选择都可以:步骤五:图片的压缩是需要一定时间的,我们可以耐心的等待一段时间,等文件压缩完成

在线图片识别文字工具推荐【免费使用】

对于写PDF或者是图片上的文字,想要从图片中提取文字,手打太麻烦,找到一个不过的在线图片识别文字的工具,免费试用: 他就是华为的:在线图片转文字 地址: https://www.huaweicloud.com/product/ocr/image-to-txt.html 原文地址:https://www.cnblogs.com/e0yu/p/11819733.html

干货!6款使用量最高的在线图片压缩工具对比评测

目前市面上有很多在线图片压缩工具,给我们日常办公提供了十分的便利性,每款工具各有侧重 我们从界面美观性.操作便利度.知名度角度选取了选取了六款进行对比评测,这六款图片压缩工具分别为: 智图 TinyPNG iLoveIMG img.top Optimizilla docsmall 我们对上述六款产品在如下 9 个纬度进行了打分对比,这 9 个纬度分别为: 使用体验:从页面设计.动画效果.传输速度.压缩效果等层面比较综合的一个评价 最大文件数:单次可上传的最大文件数 单个图片体积:单个图片体积最大

怎样使用在线Webapp生成器生成安装包

在这篇文章中,我们来介绍怎样使用在线(online)的Webapp生成器来生产在Ubuntu手机或模拟器中能够安装的click安装包. Webapp生成器的地址:https://developer.ubuntu.com/webapp-generator/. 1)打开生成器网页.并填入对应的信息 我们在浏览器中打开网页:https://developer.ubuntu.com/webapp-generator/. 并填入应用所须要的信息. 请注意:假设你还没有Ubuntu One账号,请注冊一个,

ueditor 在线附件和在线图片路径错误BUG补丁

错误 ueditor上传附件时显示和下载都是正常的,当下次点击在线附件时图片图标显示错误,再添加到网页中访问的时候出现404错误,比如:第一次添加:http://192.168.1.4:8080/uedit2/ueditor/jsp/upload/file/20140622/1403423931425017681.png第二次就变成了:http://192.168.1.4:8080/uedit2/C:/Program Files/Apache Software Foundation/Tomcat