资料工具网站

10个优秀的占位图片（Placeholder Image）生成工具

Placehold.it

A quick and simple image placeholder service.

<img src="http://placehold.it/350x200" />
<img src="http://placehold.it/300/09f/fff.png" />
<img src="http://placehold.it/300&text=placehold.it+rocks!" />

　　

lorempixel

Placeholder Images for every case. Webdesign or Print. Just put a custom url in your html and you receive a proper placeholder picture

<img src="http://lorempixel.com/350/200" />
<img src="http://lorempixel.com/350/200/sports" />
<img src="http://lorempixel.com/350/200/sports/Dummy-Text" />

　　

Fake images please?

Fakeimg.pl is a little tool that generates images with an URL. Choose the size, the colors, even the text.

<img src="http://fakeimg.pl/350x200/" />
<img src="http://fakeimg.pl/350x200/ff0000/000" />
<img src="http://fakeimg.pl/350x200/?text=World&font=lobster" />

　　

{placekitten}

A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code.

<img src="http://placekitten.com/350/200" />
<img src="http://placekitten.com/g/350/200" />

　　

hhhhold!

Never understimate the insanity of user-generated content in your projects again.

<img src="http://hhhhold.com/350x200" />
<img src="http://hhhhold.com/m/w/b" />
<img src="http://hhhold.com/350x200/png" />

　　

Instasrc

Instantly get real image placeholders for your development site!

<img src="http://instasrc.com/350x200" />
<img src="http://instasrc.com/350x200/art" />
<img src="http://instasrc.com/350/200/art/greyscale" />

　　

FPOImg.com

provide an easy way to generate placeholder images for your designs whether it be for web development, print, or a school paper

<img src="http://fpoimg.com/350x200" />
<img src="http://fpoimg.com/350x200?text=Advertisement" />
<img src="http://fpoimg.com/350x200?text=Advertisement&bg_color=000000&text_color=666666" />

　　

Dynamic Dummy Image Generator

Dynamic Dummy Image Generator

<img src="http://dummyimage.com/350x200/200/fff" />
<img src="http://dummyimage.com/350x4:3" />
<img src="http://dummyimage.com/350/09f/fff.png" />

　　

占位图

占位图生成器

<img src="http://zhanweitu.com/350/200" />

　　

功能对比表

	图像尺寸	背景色	文本	文本色	灰度图片	格式	其他特点
注：*表示高度可选，缺省时输出正方形
Placehold.it	√*	√	√	√		gif, jpeg, jpg, png
lorempixel	√	√	√	√	√		13种图片分类
Fake images please?	√*	√	√	√			可设置字体
{placekitten}	√*				√		图片均为喵星人
hhhhold!	√*					jpg, png, gif	多种尺寸参数，图片来自 ffffound
Instasrc	√				√		36种图片分类
FPOImg.com	√	√	√	√
Dynamic Dummy Image Generator	√	√	√	√		png, gif, jpg	可按比例输出大小
占位图	√		√				国内网站，速度较快
The Random Image Generator	√	√					抽象背景，批量生成

 

 

 

Can I use... Support tables for HTML5, CSS3, etc

 

1、数字全排

<script>
    function perm(arr) {
        var ret = [];
        (function fn(source, result) {
            if (source.length == 0) {
                ret.push(result.join(''));
            }
            else {
                var len = source.length;
                for (var i = 0; i < len; i++) {
                    var _source = source.slice(0, i).concat(source.slice(i + 1));
                    var _result = result.concat(source[i]);
                    fn(_source, _result);
                }
            }
        })(arr, []);
        return ret;
    }
    var result = perm('123456'.split(''));
    document.body.innerHTML+=result;
  </script>

　　

http://caniuse.com/