8个免费的在线生成占位符网站

在设计网页的时候,设计师们经常需要在网页上放置精确的高宽固定的占位图片,用来展示一些设计的效果。例如产品展示页面,需要很多产品的缩略图,首页滚动的幻灯片的滚动图片等等。为了节省设计师去图库查找这些图片的时间。Belary现在收集了一些国外的在线设置图片占位符(placeholder)的网站,分享给大家。

1 – PlaceKitten


placeKitten

使用方法

在placekitten.com网址后直接加入你需要设置宽度与高度。例如,如果我需要一个450× 300像素的占位图片,设置一个img标签的源属性为http://placekitten.com/450/300即可

  1.   
  2. <!– Black and White –>  
  3.   

2 – Placehold.it


placeholdit

使用方法

值得注意的是,使用placehold.it的服务,使得设置的图片尺寸的方法更加传统,而不是分成宽度和高度单独设置。
Placehold.it是有点不同的,它不是在占位符上使用的照片,它采用传统的实心彩色图像(solid color images),这可能对一些设计师更具吸引力。

  1.   
  2. <!– Set Colors –>  
  3.   
  4. <!– Add Text –>  
  5.   
  6. <!– Set Image Type –>  
  7.   
  8.   
  9.   

3 – SheenHolders


sheen

使用方法

这站都是由Sheen作为占位图像(一看就一粉丝弄的啊 囧)

  1. http://sheenholders.com/421×550   
  2.   

4 – FlickHoldr


flickrholder

使用方法

在使用Flickr的照片作为占位符时,它也允许选择一个作为第三部分所需的标记。甚至可以选择显示黑白照片。

  1.   
  2. <!– Apply one or more tags –>  
  3.   
  4. <!– Need black and white? –>  
  5.   

5 – LoremPixum


lorempixum

使用方法

  1. <!– Default –>  
  2.   
  3. <!– Black and White –>  
  4.   
  5. <!– Tagged –>  
  6.   

6 – PlaceDog


placedog

使用方法

  1.   
  2. <!– Black and White –>  
  3.   

7 – DummyImage


dummy

使用方法

DummyImage相对于它的一些竞争对手,提供了很大的灵活性。让我们在看看一些可用的选项。

  1. <!– If you only pass a width, a square will be generated –>  
  2.   
  3. <!– Width and Height –>  
  4.   
  5. <!– Apply background and text colors –>  
  6.   
  7. <!– Set image type –>  
  8.   
  9.   
  10.   
  11. <!– Custom Text –>  
  12.   
  13. or with background and text colors…   
  14.   

8 – Griddle.it


griddle

使用方法

Griddle.it是非常独特的,因为与它的同行类似,其重点放在建立网格图像,然后可以在生产过程中应用到你的网页设计背景。
在这里查看现场演示。

  1. / Generate a 960px grid, with 12 columns and 30px gutter /  
  2. body {   
  3. background: url(http://griddle.it/960-12-30) repeat-y center top;   
  4. }