資料工具網站

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

 

一、數字全排

<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/