前端图片设计指南

网站的图片设计与排版可以影响整个网站的基调，不同的图片会带来不同的效果，比如深色的图片会给人一种紧张感，而绿色，红色灯鲜艳颜色则会让人们的视觉感官放松下来。

国外常用的几个网站大家可以参考下：www.gettyimages.com；www.veer.com；www.sxc.hu；www.fotolia.com；www.istockphoto.com ；piccsy.com

国内比较好的网站：http://www.topit.me；http://www.topit.me/；http://huaban.com（花瓣网）；

一般常用这些代码来对图片进行定位，这样可以有效的防止调用时混淆：

img.large {
width: 500px;
height: 500px;}
img.medium {
width: 250px;
height: 250px;}
img.small {
width: 100px;
height: 100px;}
img.align-left {
float: left;
margin-right: 10px;}
img.align-right {
float: right;
margin-left: 10px;}

图片的居中有两种方法，为包含图片的容器添加text-align：center；属性；或者直接为图片添加margin：0 auto；属性，但是需要注意的是img是行内元素，所以首先要将其变成块级元素。

img.align-center
{
    display: block;
    margin: 0 auto;
}
div.img-center
{
    text-align: center;
}

图片的尺寸大多数网站参考的是如下“标准”：

Small portrait: 220 x 360，肖像画
Small landscape: 330 x 210，风景画
Feature photo: 620 x 400 ，特色图片。

图片的大小对网站的加载速度会有很大的影响，因为首先加载的是HTML与CSS代码，浏览器通过代码知道需要留给图片的空间大小。

背景图片的设置：背景图片的设置常常通过对body的设置实现：

body {
background-image: url("images/tulip.gif");
background-repeat: no-repeat;控制重复性
background-position: center top;}控制背景图片的位置，也可以通过以浏览器左上角为基准进行位移定位：background-position: 50% 50%;

对背景图片的设置需要遵守以下的顺序，可以少项。

1: background-color
2: background-image
3: background-repeat
4: background-attachment
5: background-position