css background设置背景图片技巧及Sprite的应用-高级应用-Css教程-壹聚教程网css background设置背景图片技巧及Sprite的应用
本文我们来告诉你如何设置css background，而CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background进行背景定位。
Background是什么意思，翻译过来有背景意思。同样在css里面作为css属性一成员同样是有背景意思，并且是设置背景图片、背景颜色、背景图片截取等样式。
首先先来看看background有那些值(可进入CSS手册的background详细了解)
可以按顺序设置如下属性(可点击进入相应的css手册查看使用)：
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-attachment 背景图片是固定还是滚动
background-position 背景图片的定位
接下来我们重点来讲解css background通常的使用方法
首先我们来看下面一段代码
background:url(bgimg.gif) no-repeat 5px 5
如下图解释
从图上的CSS background解析图我们可以详细了解到background的css属性使用方法。
background:url(bgimg.gif) no-repeat 5px 5这样的css背景表达可以节约和优化css文件代码。
学习者可以使用和测试更改background各个属性来了解和掌握关于css background
CSS Sprite的应用
什么是CSS Sprite ?
不知道您在浏览的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON，栏目背景啊，图片按钮啊等都有会有规则的合并一张背景图,然后用background-position来实现背景图片的定位，他们为什么要花费一些时间来合并这些CSS背景图片呢,CSS中用一张背景图做页面的技术到底有什么优势呢?
通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做&CSS贴图定位&。
使用CSS Sprite 的好处?
CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。如下图所示:
实现方法：
首先将小图片整合到一张大的图片上
然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95
一、对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果，而且能为你节省10%-30%的文件体积。
二、Photoshop相比起Fireworks，导出同等质量的PNG图片，体积会稍大。而Fireworks虽然做了相应压缩优化，但没有达到最优秀的压缩。
三、我所知的设计软件，对于PNG图片的处理都没做到最优秀的压缩，图片体积还有一定的压缩空间。可以尝试使用下面介绍的&图像优化工具& 做无失真的压缩优化。
四、图片体积及尺寸方面，建议体积保持在100K以内(较为符合国情最佳请求SIZE)，size为800px(最佳尺寸)。
CSS Sprites图片切割术
三、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。
四、size相同的CSS Sprites图片中留有较大空隙，某程度上多数情况会增大了体积，所以CSS Sprites的图片不要有空隙。
五、在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大。
六、在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大。
九、黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。
如下是apple公司的应用
如何来制作?
基本的原理，就是利用background-postion的负值来进行调节。
当我们定位于background-position:-50px -50时发现图片向左上，移动了，也就以DIV的左上角为中心，图向左移动了50PX，向右也移动了50PX.
参考点： 以图片为(0,0)为原点。
如下图片&&&&进行定位
使用fireworks工具来定位图片。
background-position: -396px -116
上一页： &&&&&下一页：相关内容五彩缤纷的背景图片
类别：可爱、卡通QQ皮肤日期：录入：骑着猪看夕阳围观：
分享给好友：
猜您喜欢的
本文标题：五彩缤纷的背景图片
本文地址：/qqskin/6045.html
大家喜欢的css背景图片的设置
css背景图片的设置
css2 中的背景(background)
CSS2 中有5个主要的背景(background)属性，它们是：
* background-color: 指定填充背景的颜色。
* background-image: 引用图片作为背景。
* background-position: 指定元素背景图片的位置。
* background-repeat: 决定是否重复背景图片。
* background-attachment: 决定背景图是否随页面滚动。
这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。
背景色(background-color)
background-color 属性用纯色来填充背景。有许多方式指定这个颜色，以下方式都得到相同的结果。
background-color:
background-color: rgb(0, 0, 255);
background-color: #0000
background-color 也可被设置为透明（transparent），这会使得其下的元素可见。
背景图(background-image)
background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。代码很简单，只需要记住，路径是相对于样式表的，因此以下的代码中，图片和样式表是在同一个目录中的。
background-image: url(image.jpg);
但是如果图片在一个名为 images 的子目录中，就应该是：
background-image: url(images/image.jpg);
糖伴西红柿：使用 ../ 表示上一级目录，比如 background-image: url(../images/image.jpg); 表示图片位于样式表的上级目录中的 images 子目录中。有点绕，不过这个大家应该都知道了，我就不详说了。&版权所有，转载请保留链接。
背景平铺(background-repeat)
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。这也许是你需要的，但是有时会希望图片只出现一次，或者只在一个方向平铺。以下为可能的设置值和结果：
background-repeat:
background-repeat: no-
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat:
背景定位(background-position)
background-position 属性用来控制背景图片在元素中的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。
下面的例子中，设置了一个背景图片并且用 background-position 属性来控制它的位置，同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。
background-position: 0 0;
background-position: 75px 0;
background-position: -75px 0;
background-position: 0 100
background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。
关键词是不用解释的。x 轴上：
顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：
background-position:
使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下：
background-position: 100% 50%;
This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of
the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.
糖伴西红柿：这一段没想到合适的翻译，保留原文，意译。&版权所有，转载请保留链接。
update:&感谢的指教，这段搞明白了。使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时，使用背景图和元素的左上角为对齐基点。例如上例的
background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点，和元素的 100%(right) 50%(center) 这个点对齐。
这再一次说明了，我们一直认为已经掌握的简单的东西，其实还有我们有限的认知之外的知识。
注意原点总是左上角，最终的效果是笑脸图片被定位在元素的最右边，离元素顶部是元素的一半，效果和 background-position: 一样。
background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动)，fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。
为了正确地理解 background-attachment，首先需要明白页面(page)和视口(view port)是如何协作地。视口(view port)是浏览器显示网页的部分(就是去掉工具栏的浏览器)。视口(view port)的位置固定，不变动。
当向下滚动网页时，视口(view port)是不动的，而页面的内容向上滚动。看起来貌似视口(view port)向页面下方滚动了。如果设置 background-attachment: scroll，就设置了当元素滚动时，元素背景也必需随着滚动。简而言之，背景是紧贴元素的。这是 background-attachment 默认值。
用一个例子来更清楚地描述下：
background-image: url(test-image.jpg);
background-position: 0 0;
background-repeat: no-
background-attachment:
当向下滚动页面时，背景向上滚动直至消失。
但是当设置 background-attachment 为 fixed 时，当页面向下滚动时，背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。
用另一个例子描述下：
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-
background-attachment:
页面已经向下滚动了，但是图像仍然保持可见。
需要重视的一点是背景图只能出现在它父元素能达到的区域。即使图片是相对于视口(view port)定位地，如果它的父元素不可见，图片就会消失。参见下面的例子。此例中，图片位于视口(view port)的左下方，但是只有元素内的图片部分是可见的。
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-
background-attachment:
因为图片开始在元素之外，一部分图片被切除了。
背景的简写属性
可以把背景的各个属性合为一行，而不用每次都单独把他们写出来。格式如下：
background: &color& &image& &position& &attachment& &repeat&
例如，下面的声明
background-color:
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment:
background-repeat: repeat-y;
可以合为单独一行：
background: transparent url(image.jpg) 50% 0 scroll repeat-y;
而且不需要指定每一个值。如果省略值地话，就使用属性地默认值。例如，上面那行和下面这个效果一样：
background: url(image.jpg) 50% 0 repeat-y;
背景的一般用法
除了可以用来使元素更加优雅这类显然的用法之外，背景也可以用于其它的目的。
当使用 css 的 float 属性来定位布局元素时，要确保两栏或多栏有相同的长度是比较困难的。如果长度不同，其中一栏的背景会比另外的短，这会破坏整个设计。
仿栏是个非常简单的背景技巧，这个技巧最早发表在&。思路很简单：不再给每列单独设置背景，而是给各列的父元素设置一个背景图。所有栏的设计都包含在这张图片之中。
在网页上，对于字体的选择是相当有限的。可以使用 sIFR 之类的工具来定制字体，但是这需要用户启用 JavaScript 。一个适用于任意浏览器的简单方法是，用想用的字体来做一张文本图片，并用这张图片作为背景。这样，文本依然出现在文档标记中以供搜索引擎检索和屏幕浏览器识别，但是在浏览器中就会显示首选的字体。
例如，HTML 标记可能是这样的：
&h3&Blogroll&/h3&
假如有一个 200 乘 75 的图片，上面有更好看的字体，就可以用如下方式来替换文本：
h3.blogroll {
width: 200
height: 75
background:url(blogroll-text.jpg) 0 0 no-
text-indent: -9999
简单的圆点
无需列表中的圆点看起来很难看。不用再处理所有不同的 list-style 属性，只需要简单地把他们隐藏并用背景图代替就可以了。因为图片可以随意选择，这些圆点就可以看起来更漂亮。
下面，我们把一个无需列表改造成有圆滑圆点的：
list-style:
padding-left: 40
background: url(bulletpoint.jpg) 0 0 no-
CSS3 中的背景
CSS3 中的背景有较多改进。最显著的是多背景图片的选项，同时也增加了4个新属性。
CSS3 中，可以对一个元素应用一个或多个图片作为背景。代码和 css2 中的一样，只需要用逗号来区别各个图片。第一个声明的图片定位在元素顶部，其它的图片按序在其下排列，例如：
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
新属性：背景修剪(background-clip)
这又把我们带回了文章开始讨论的那个关于边框内图片显示的话题。它被描述为“背景描绘区”。
background-clip 属性用来增强背景显示位置的控制能力。可能的值为：
* background-clip: border-
背景显示在边框内。
* background-clip: padding-
背景显示在内补白(padding)内，而不是边框内。
* background-clip: content-
只在内容内显示背景，而不是内补白(padding)和边框内。
* background-clip: no-
默认值，和 border-box 一样。
新属性：背景原点(background-origin)
这个属性和 background-position 结合起来使用。可以从边框，内补白或者内容盒子开始计算 background-position (类似于 background-clip)。
* background-origin: border-
以边框为原点开始计算 background-position.
* background-origin: padding-
以内补白为原点开始计算 background-position
* background-origin: content-
以内容盒子为原点开始计算 background-position
对于 background-clip 和 background-origin 不同的一个解释参看&
新属性： 背景尺寸(background-size)
background-size 用来调整背景图的大小。有好几个可能值：
* background-size:
缩小图片来适应元素的尺寸(保持像素的长宽比)
* background-size:
扩展图片来填满元素(保持像素的长宽比)
* background-size: 100px 100
调整图片到指定大小
* background-size: 50% 100%;
调整图片到指定大小。百分比是相对于包含元素的尺寸的。
可以看一下&&网站上的几个例子。
新属性：(background-break)
CSS3 中，元素可以被分成几个独立的盒子(例如 使内联元素 span 跨越多行)。background-break 属性用来控制背景怎样在这些不同的盒子中显示。
可能值为：
* Background-break:
默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子，依然是一个整体一样)
* Background-break: bounding-
把盒之间的距离计算在内
* Background-break: each-
为每个盒子单独重绘背景
背景色(background-color)的改进
background-color 在 css3 中有了稍许改进。除了设置背景颜色之外，如果元素底层的背景图不可用，还可以设置一个“回退色”。
通过在回退色之前增加一个斜杠(/)来实现，例如：
background-color: green /
此例中，背景色应该是绿色(green)。然而，如果底层背景图不能使用的话，背景色就是蓝色而不是绿色。如果在斜杠前不指定颜色，默认为透明(transparent)。
背景平铺(background-repeat)的改进
CSS2中当图片平铺时，会被元素在末端截断。CSS3 引入了两个属性来修正这个问题:
* space: 应用同等数量的空白到图片之间，直到填满整个元素
* round: 缩小图片直到正好平铺满元素
关于 background-repeat: 的一个例子，可以在网站看到。
背景附着(background-attachment)的改进
background-attachment 属性增加了一个新值：local。这是用来配合可以滚动的元素的(设置为 overflow: 的元素)。当 background-attachment 设置为滚动(scroll)时，背景图不会随元素内容的滚动而滚动。
设置为 background-attachment : 时，背景图会随内容的滚动而滚动。
总结一下，css 中关于背景有许多需要知道的知识。但是一旦把这些知识融会贯通了，这些技术和命名约定就变得非常有意义而且很快就会成为潜意识行为了。
如果刚接触 css，主要不断联系就可以较快地掌握背景的要点了。如果是老手，我希望你可以和我一样期待 css3
发表评论：
TA的最新馆藏设计师找图指南！从零开始教你找到能过稿的背景大图
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
设计师找图指南！从零开始教你找到能过稿的背景大图
编者按：大图找得好，甲方改稿少——这句话包含两层意思：1，你得知道在哪里能找到高清大图。2，你得知道用哪张，怎么用，关于前者，优设有很多资源，可直接看文末。后者是今天这篇好文的重头戏，抓案例，聊设计，一一说来，直到帮你找到甲方魂牵梦萦的那张图。
当一张好看的图片出现在我们眼前时，它可以瞬间抓住我们的注意力，引起我们的共鸣。因此，创建一个有吸引力的网站，图片是网站中的一个重要组成部分。图片会影响到我们对网页的第一印象，作用至关重要，而且它们也可以告诉我们的这个网站是做什么的，还可以帮我们赢得更多用户的信任。
如果使用得当，图片起到的效果就会非常好，它可以快速的将目的信息传达给用户。但是，使用了错误的照片就会误导用户，降低用户的体验。那我们该如何选择恰当的图片呢？
中使用图片
在网站设计中，我们会注意到它的各个方面：内容，颜色，版式，层次结构，信息体系结构等细节，图片也应该得到尽可能多的关注，特别在可用性和全体用户对你的网站体验方面。
在网站上对照片的处理依赖于设计者理解和运用，因此本文将给您指出一个正确的方向，并告诉你在你的下一个Web项目中使用图片之前要好好挑选你的图片。
采用大图片时需注意
人们会根据以往的经验和预期浏览屏幕。用户眼睛最常见的是先从左上角看起，当然这也取决于个人培养的阅读模式。这时如果你在页面上使用了大图片就会立即抓住他们的注意力，并把他们拉离其一贯的阅读方式。
图片也是内容
我敢肯定，当我跟你说，图片也算是网页的内容时，你不会和我辩论，但你自己做网页的时候，真的也是这么做的吗？你有没有只是把它当做一个附加部分或者好的填充内容？你有没有考虑到这个图片内容的各个方面？在你使用图片之前你有没有正确的评价这个图片？你有没有考虑用户的心理模型和他们看到图片时的反应？这个图片给用户提供有价值的信息了吗？对用户当前的任务起到帮助了吗？这些就是你在网页上准备使用图片之前，需要考虑的问题。
图片不只是用来「装饰」网页的。我见过很多设计师只是放一个漂亮的全屏的图片在网页上，然后喊一些口号或大声呼吁，这就宣布它完成了。在很多情况下，照片尚未评估，设计师这样做仅仅只是随大流。让我们来看看如何对你的照片评估，在你在网站上使用它之前。
选择完美的照片
当你决定在你的设计中使用图片时，你有几件事情需要考虑。我假设你已经知道如何评估图片的一些基础知识，它们是：质量，尺寸，组成和曝光。在分辨率要求的质量上，选择合适的位置裁剪图片，有效裁剪过的图片更能吸引用户的注意力，图片要隐含网页主题。
剪裁图片也是一件技术活，想提高剪裁技术的同学可以右戳学习：
做完这些以后，图片已经通过了基本的测试，我们继续探讨你使用这个图片的目的。
迈克 – 帕金森曾经说过：我们的大脑对视觉影像的处理速度比文字快60000倍。
它是有用的吗？
所有照片必须是有用的。尽管用照片作为占位符、给一个网页添加了色彩或填充了一些空间，或者是做了网页背景。但是什么是有用的，有益的，发人深省的图片才是需要我们特别关注的。有用的照片应该
有助于我们更好地理解一些东西
教我们如何使用一些东西
告诉我们这些东西是如何完成的
关于在中怎么选择一个有用的图片，这里有一个漂亮的例子：Square 网站
可以看出，这个图片的形象是经过专业拍摄的（看手和指甲）。最重要的是它直接展示了这个产品是多么好用。它是一个非常有用，有教育性的图片。
类似的还有下面这个Pencil网站。跟上面的例子一样，这个图片展示了它是什么产品（笔），在哪里以及如何使用（iPad应用）。
Woodster网站也是充分利用了照片来解释产品。很显然，他们的产品是用来提升你的Mac的性能，图片同时展示了那个方便的USB接口。
Grovemade在一个全屏的背景图片上展示他们的产品集合。很明显可以看出，他们生产的产品是高端木制办公用品。图片很有用，也特别吸引人。通过图片我们很快就被它们的氛围所感染。
通过上述例子，你会发现，所有照片的表达意图很明显，是不言自明的，他们传达目的消息也非常好。你不需要去看那些长长的产品/服务/网站的内容介绍。这是一个有用的照片在中所具有的特性。
它是有效的吗？
一个有效的照片就是它能向用户传递目的信息，刺激用户产生某种行为。一个良好的，有效的产品照片能够鼓励用户去购买这些产品。我们刚才的例子中的图片都是有效的，因为看到他们的图片我门会有想购买他家产品的冲动。当我们看到图片时，它能触发我们的这种行为，就可以说它是有效的图片。
下面的图是Mobility的网站，樱桃红的耳机是不是特别有吸引力，赶快买下它吧！
iPhone公司是以它的创新主义著称，还要求他们所做的一切都要达到完美。从iPhone登陆页面里这张产品照我们可以看出，外观精美，桌面简洁精致，给用户一种你值得拥有它的感觉。
Apple 一直是业内的领军企业，官网也不例外：
我们要举出的另外一个例子是tsptr网站。请注意该照片中的男子眼睛向下看，下面有东西需要你去探索吗？答案是Yes！页面往下拉有惊喜。（官网已变，不过仍旧可以看看）
在Mapquest服务网站不仅用图片传达了情感，而且还非常巧妙通过图中人物的视线方向来引导用户去看到页面的重点——左侧的下载链接。
POCO People这个网站设计的很有趣，它充分利用了色彩，灯光还有整个页面中所陈列的物品，当你鼠标点到每一个文字区域时，图中相应的物品都会发光，这些有趣的设计能够激发用户去思考去看这个网站到底是做什么的。
Colossal网站在网页上采用了一个大照片用来展示他们的工作内容（看他手上的油漆和墙壁上的壁画），以及他们如何做这些事情（细看该男子右侧）。照片中最有趣的是左边路过的行人。他们看起来很兴奋，他们作为观众正在见证这个美丽的壁画的完成过程，这使整个照片变的很吸引人而且更能有效向用户传达信息。
它是有感情的吗？
一个有感情色彩的照片应该能带动用户的情绪。它或美观，或平静，或令人不安，或搞笑，娱乐，或有吸引力等等。无论是哪一种方式，只要能通过某种方式和我们的情感诉求达到共鸣，它就会带给我们无比大的震撼力。
Frogdesign网站的特点是，网站是针对联邦紧急事务管理局和救灾管理的案例研究。有主图，再加上一个有号召力的口号，能非常有效地传达出饱含丰富的情感。它讲了一个故事，我们虽然不在那里，却能感受到危险，仿佛身临其境。
Breath网站的主图是非常宁静。它的标语写的很好，图中那个女子闭着双眼，很享受的轻轻的呼吸，注意：下面有按钮，“吸气”。这样的网站是不是很能带动用户的情绪?
Shaun Groves这个网站的主图主要讲述了一个伟大的故事，主角是肖恩·格罗夫斯。它传达的幸福，信任，希望，友谊和期待，无论是谁看到这个图，都会对它有所触动吧。
Relay Foods这个网站注重实用性，从左边和右边的女子脸上喜悦的表情可以看出，她们热爱自己的工作，而且所有的食物都是纯天然的，女子的表情都是自然流露，和食品是纯天然的即是自然的相一致。
表情的力量
有七个（或8）基本情绪：
这些表情是很常见的，大都是通过面部表情和身体姿势来表达。如果想使用图片和用户进行交流以便传达目的信息，那么你就要注意观察这七种表情所传达的信息，然后再决定你到底要用哪种表情来打动你的目标用户。
特写镜头能够立刻抓住用户的注意力，有助于触发用户的情绪，这也促使他们成为一个强大的设计元素。
刚才我们已经举了很多例子，但是我们需要进一步探索它们。
Build Fire网站中用到一个女子的照片，但是这个照片却没有向我们展示任何有关他们产品的内容，它的作用就是迅速吸引用户眼球。如果只有下面那张手机图片，没有这个女子，肯定无法达到现在这样的效果。
如果您决定在您的个人网站上使用了一张大的人物肖像，我会给你点个赞。但是你要小心！一个微小的面部表情可以让你在信息沟通中产生巨大的差异。Daniel Eckler网站就做的很好，将自己完美的展现在用户面前，他的面部表情中表现出的是信心，冷静和信任。
每个人都知道在WTC发生了什么事。9/11 Tribute Center这个网站是专门记录曾经在那里发生过的故事。照片上的人注视着我们，邀请我们一起加入到这个社会性话题当中。
Conservation网站中将在文字覆盖在的特写人物的脸上，效果不错，很有特点。图中Kayapo男子照片表达出权威，勇气和赞赏的信息。
正如苏珊说，慈善机构的网站上放一个近景拍摄的照片是最有说服力，这是事实。Save the Children这个网站就是这样做的，一个孩子对的特写照片，一个完全对齐与该网站的标语和主题，还看到了什么？对，小孩子的视线：捐款按钮。点一下吧，他们需要你。
如何在网页设计“不”使用照片
尽管我们已经看到了在网站设计中使用照片的好例子，但是图片很容易被滥用。因此，我将告诉你如何不使用照片和怎样避免滥用的情况。
无关的照片 ——一个做网页设计工作室，先要表达自己能够提供专业的设计，所以用了Tailored-made（量体裁衣）的引申义，知道用比喻很好。但是却错用了彩色线轴的图片，第一眼还会以为这是一家裁缝铺，有木有？这表达方式也太晦涩了。
对于这个图我们有一个解决方案，在这里使用纯色或者是团队的合影。此外，数码产品不能进行定制的。
一个提供团队协作的软件，却用了一个工作中流露出担忧这种表情的女人的图片。这会给人一种这样的印象：这个女人在担心。这样会影响软件在网络中的推广。我们可以这么解决，使用真正的产品的截图或者是放一张正在使用他们的产品，而且面露幸福表情的女人的图片。
下图也是一个关于和内容无关的图片的例子。尽管“手工制作”的字样和“作坊”可以联想到图片本身，但它不表达出该网站的真正意义。Brand Bat是关于创造品牌战略，用这些木材的图片，不能很好的传达他们多想要表达的讯息。
模糊的背景图片
这图是是用来装饰的占位图。没有任何关于该网站的信息，用户无法了解这个网站。我的建议是尽可能避免使用模糊的背景图片，除非你可以做的很好。
错误的选择照片
当你看到这张照片时，你的第一印象是什么？两个幸福的人站在一家咖啡店，他们将帮助你的在线业务取得成功，对不对？不，一个全方位服务的网页设计公司还应该在图片中放上他们幸福又成功的客户。这样的错误也是我们应该避免的。
他们几乎从来没有传达任何有用的讯息。为什么有一个小男孩戴着眼镜，还手竖大拇指？他是一名提供的PHP编码服务开发人员？显然不是。
一个全国性的网站实在不应该用这张照片来传达讯息。首先，这个图片和话题无关的，女人似乎咬她的指甲（我们都知道这是一种心理障碍），而且她的平板电脑屏幕是模糊。这张照片所显示的是焦虑，紧张和压力的情绪，我真的认为这样的图片不应放到全国性的网站上。
最后的思考
文章中的例子大都在网站中使用了大图，但图片还有很多种使用方式，只要使用得当，就能够吸引用户。在你设计程序之前要好好考虑一下你要使用的图片。如果你做了正确的选择，恭喜你你已经有足够的洞察力。
要对好的图片拍摄投资：一个伟大的摄影师可以极大的提升到你的网站的商业价值。 不管你怎么设计，你的用户都可以从你的设计中受益。了解人们的行为确实是做出有效的设计的唯一途径，这对网站设计选择最佳照片也是实用的。期待你做出的网页哦！！
大图找得好，甲方改稿少！
最受设计师欢迎的高清大图，免费可商用！
第二波紧随其后！再也不怕图片侵权了！
图片有了，影片素材也不能少！
原文地址：
译文地址：
译者：Pudding
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量82万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注}