怎么在html中显示背景? 只要显示一张图片(不要平铺)
[问题点数：20分，结帖人CSDN]
本版专家分：53
结帖率 99.2%
CSDN今日推荐
本版专家分：226467
2002年 总版技术专家分年内排行榜第六
2005年7月 荣获微软MVP称号2006年7月 荣获微软MVP称号2003年4月 荣获微软MVP称号
2006年6月 Web 开发大版内专家分月排行榜第一2006年5月 Web 开发大版内专家分月排行榜第一2005年12月 Web 开发大版内专家分月排行榜第一2005年10月 Web 开发大版内专家分月排行榜第一2005年2月 Web 开发大版内专家分月排行榜第一2005年1月 Web 开发大版内专家分月排行榜第一2002年12月 Web 开发大版内专家分月排行榜第一2002年8月 Web 开发大版内专家分月排行榜第一2002年7月 Web 开发大版内专家分月排行榜第一
2006年3月 Web 开发大版内专家分月排行榜第二2005年3月 Web 开发大版内专家分月排行榜第二2004年12月 Web 开发大版内专家分月排行榜第二2003年2月 Web 开发大版内专家分月排行榜第二2003年1月 Web 开发大版内专家分月排行榜第二2002年11月 Web 开发大版内专家分月排行榜第二2002年12月 多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第二
本版专家分：14692
2006年8月 PHP大版内专家分月排行榜第一2006年7月 PHP大版内专家分月排行榜第一
2006年10月 PHP大版内专家分月排行榜第三2006年9月 PHP大版内专家分月排行榜第三
本版专家分：13201
2004年7月 多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第三
本版专家分：13201
2004年7月 多媒体/设计/Flash/Silverlight 开发大版内专家分月排行榜第三
本版专家分：53
结帖率 99.2%
本版专家分：53
结帖率 99.2%
本版专家分：53
结帖率 99.2%
本版专家分：0
本版专家分：11221
2005年9月 PHP大版内专家分月排行榜第二2005年5月 PHP大版内专家分月排行榜第二
2010年3月 PHP大版内专家分月排行榜第三2005年4月 PHP大版内专家分月排行榜第三
本版专家分：227
本版专家分：129
匿名用户不能发表回复！|
CSDN今日推荐在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
目前大部分网页均是用白色或是灰白色作为背景，如果用一张图片作为背景，我想弊端无非就是多增加了加载文件的大小，但是如果用ps压缩控制在100kb左右，也没太大影响吧，一个网页多增加几张图片也许就超过100kb了，比如下方这个效果图：
背景用一种渐变式色彩图片，增加了网页的唯美，但国内很少或是几乎没有采用这种方案的，那有何弊端？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
下载速度。硬伤，尤其是移动环境下。移动平台上有时可是连用jQuery一类大的库都要犹豫的。
真的很占内存。浏览器渲染的时候可是要把JPG解码回位图的，所以不要不拿100KB当回事。
设备兼容性。Retina屏幕和4K超高清的分辨率，就算这么大也不够。JPG本身就模糊还好，一旦背景中有任何细节，放大了可就朱军画质了。
CSS兼容性（见问题位的评论）
注：本答案只按提问要求列出弊端，无意否定大图设计的合理性。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首页改版后就是的背景图~首页用的是的背景图(之前用过HTML5和CSS3实现的随着时间变化显示太阳啊月亮什么的背景图，记不清楚了。)
你可以参考一下。
没什么是不行的，一切取决于你的产品设计和业务需求。
防止在高分辨率的电脑上显示效果比较虚的办法就是直接把图片弄虚了不就好了...==! 本来就是背景图...就跟摄影一样，一些是为了突出主题。虚化才会使得主体变得更突出...当然..还是取决于设计。
浏览器兼容性的问题取决于网站定位的用户群体
比如，knewone这种专注于新奇产品的网站，用IE6的人根本就不是他的用户群体，显然压根就不用太考虑IE兼容性的问题。而饿了么服务于学校周边的学生，服务群体相对来说比较广，而且参差不齐，他就需要一些在落后浏览器上的替代方案。
你例子中这种渐变和光晕效果背景，我觉得用CSS实现更好一些。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
天朝网速慢，牺牲审美，为了带宽~~~
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
图片始终不是好的选择，等到Chrome成主流就可以解决了，
背景用几个radial-gradient填色，然后-webkit-filter:blur
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个效果图。。。。。的背景图的意思。。。不是说有个背景图。。而是为了看起来好看才加的一个背景图。。。。。。。。。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用CSS3 background-image，linear-gradient， filter等来实现，
再加个transition的话甚至可以做成IOS那种动态的渐变色，
如果用SASS Compass的话，各种浏览器的Hack都包括了，写起来很方便的，
千万不要用图片！
至于性能以及兼容性，可以做responsive design和feature detection：
首先提供多种实现(css-fallback, image, css3-static, css3-dynamic)
如果是桌面，一切好办，不支持CSS3就image,支持就css3-static或css3-dynamic
如果是移动端,考虑多种因素之后,比如用户设置,机器性能,分辨率,可以在css3和image里选一个,如果机器老旧且在移动网络上,既不能渲染也不能耗流量，只好css-fallback或者支持css3就强制用css3渲染
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以的啊，连百度这种网站的主页也是可以设置一张高分辨率照片做背景。你只要做好“另外一种界面设计来应付用户加载不了图片”的情况就行了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果是我的话，我会喜欢全图的设计。但是一般全图都是模糊的，前面加个遮罩层，什么画质都不重要了。当然，没有遮罩层的设计则更加震撼。比如：你可以看下的官网
和的设计。
这些优秀的设计，哪一个少了图，甚至有用巨幅（低码率）视频做背景的。如果大家觉得我发的这两个大神作品应该是有说服力的吧。简洁，大图和高互动性是未来的趋势。
当然具体到细节和为什么不建议使用大图，大家说的都有道理。但是我觉得细节是可以用技术克服的，但是思想的围栏都是用来突破的。
时代在发展，有些约定俗成的东西，有朝一日有都可能成为过往云烟，比如WEB安全色和960px设计。
补一个网站，刚刚发现的，
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你可以在我这个网速下 试一试打开网站 ...
少年 眼睛会哭瞎的啦 　　ˋ(′～‵)ˊ
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
先弄个模糊的，颜色少的图片占位，domready后，替换背景图为高分图~
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
国外也会采用这种方案吗？
老外的虚拟主机租用早就进入了按流量计费的年代了！难道他们不怕流量爆表？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
允许的话 可以用css3 , 判断浏览器,现代浏览器用样式, 旧浏览器 可以用图片.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先，设计成这个样子，背景即便是用单色（灰色），效果也不会太差。
其次，可以考虑小块背景图平铺。
再其次，既然设计图都这么讲究了，就别考虑那么多了，怎么好怎么来。
如果是个人站点，或者访问量不是特别大，那我说个跑题的事，以前写博客的时候每次都特别在意配图的大小，一般都是几十K甚至十几K，后来觉得效果最重要，300K的图也往上放，显示效果好了，也没说影响多大。
题主考虑一下自己的目标用户是哪些，他们是怎样的设备和网络质量。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
100K的图片现在算大么。
如果是效果美观的话，100K算的了什么。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
要看具体是什么背景。
能用css实现的就别用图片了
如果你的网站本身就是响应式设计，你应该知道在显示不了大图的设备上就不要加载大图背景了 :)
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。　　这一周的学习仍然是以切图为主。完成了100度单页的制作和中古项目的大部分页面。在这一漫长而又细腻的过程中感受是良多的，当然也有很多值得分享的经验。　　
　　对前段设计师来说，切图是必不可少的步骤。网页中除了文字内容，大部分诸如图片，图标的部分都需要使用PS从各种图片中切下。指定出一种合适的格式，然后用代码调用图片。WEB上能使用的图片只有gif,png,jpg(jpeg)这三种格式的图片。他们各自也有着不同的使用用途。　
　　一般来说，gif格式用于比较小的图片，诸如，页面中用到的大部分图标。如有小型动画也可使用gif格式；png格式则用于稍大的图片，它可以很好的保证图片的清晰度；jpg则适用于更大的图片。
　　出于提高网页访问速度和搜索引擎优化的目的，可将页面中不会变动的图片及图标等整合到一张大图中。这样可有有效减少网站对服务器图片的请求次数。在切图时这也十分的方便，无需在为每一个图标新建一个文档。这里也得说一个属性，即background-poistion属性。由于这个属性的特殊性，我们在切图及调用图片时也得注意一些细节问题。
　　如：background-poistion: -50px -100 或者：background:url(../images/big.png) -50px -100px no-
　　这条代码的意思是，调用big.png这张图片作为背景图。在这张大图中定位在50px,100px这个位置。再由标签的大小来确定在页面中需要显示的背景图范围。
　　问题会出现，这种方式我们无法从代码中确定背景图片在标签中的显示位置。如果所调用的图片只需在标签的左边或右边显示，那么这种合并背景图的办法将无能为力。当出现这种情况时，我们只能将需要在标签中定位背景图的图片单独放置在合适宽度的文档中。然后，还是使用相同的命令：background-position:left/right/center top/bottom；来实现。
　　此外，其它的注意情况还有：对只需引用背景图片的标签，往往需要在其中输入&空格符；引用背景图的标签一定注意其宽、高设置，或者还需更改其行块属性；在拼合背景图时注意其摆放位置，一定方便计算、测量其所在位置，当然应该本着以节约空间为主。
阅读(...) 评论()如何将多个图片合并到一个文件流，一同输出到网页显示
[问题点数：40分，结帖人zxz19]
本版专家分：1
结帖率 100%
CSDN今日推荐
本版专家分：537869
年度总版至少三次排名前十即授予名人勋章
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2011年 总版技术专家分年内排行榜第六2010年 总版技术专家分年内排行榜第八
本版专家分：72349
2014年4月 荣获微软MVP称号
2017年6月 移动开发大版内专家分月排行榜第一
2013年12月 .NET技术大版内专家分月排行榜第二2013年11月 .NET技术大版内专家分月排行榜第二2013年10月 .NET技术大版内专家分月排行榜第二2013年8月 .NET技术大版内专家分月排行榜第二2013年7月 .NET技术大版内专家分月排行榜第二
2013年9月 .NET技术大版内专家分月排行榜第三
本版专家分：1
结帖率 100%
本版专家分：72349
2014年4月 荣获微软MVP称号
2017年6月 移动开发大版内专家分月排行榜第一
2013年12月 .NET技术大版内专家分月排行榜第二2013年11月 .NET技术大版内专家分月排行榜第二2013年10月 .NET技术大版内专家分月排行榜第二2013年8月 .NET技术大版内专家分月排行榜第二2013年7月 .NET技术大版内专家分月排行榜第二
2013年9月 .NET技术大版内专家分月排行榜第三
本版专家分：1
结帖率 100%
本版专家分：136747
2014年10月 荣获微软MVP称号2013年10月 荣获微软MVP称号2012年10月 荣获微软MVP称号
2009年2月 .NET技术大版内专家分月排行榜第三
本版专家分：537869
年度总版至少三次排名前十即授予名人勋章
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2011年 总版技术专家分年内排行榜第六2010年 总版技术专家分年内排行榜第八
本版专家分：537869
年度总版至少三次排名前十即授予名人勋章
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2011年 总版技术专家分年内排行榜第六2010年 总版技术专家分年内排行榜第八
本版专家分：1
结帖率 100%
匿名用户不能发表回复！|
CSDN今日推荐前端开发中，对图片的优化技巧有哪些？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。<strong class="NumberBoard-itemValue" title="被浏览<strong class="NumberBoard-itemValue" title="4分享邀请回答youtube.com/watch?v=r74RAcrc1ZA（请自备梯子），这里就不展开了。8. 资源的lazyload或postpone。（lazyload：延迟到其他资源下载完成后再加载，postpone：延迟到元素可见再加载。）目前基本上都要用脚本控制。未来HTML和CSS会增加相关的控制属性，见：。9. 资源的prefetch。可用&link rel=prefetch&，见。注意prefetch只是hint，Firefox会预取资源（如果网络空闲的话），而IE 9则是对该资源的hostname进行DNS预解析。如果你真的需要更强的控制，则得用脚本。注意：Chrome支持与prefetch相近但更进一步的&link rel=prerender&，另外SPDY加入了与prefetch相近但语义不同的subresource link支持，这两个新特性我也没用过，有兴趣的可以尝试。图片的其他优化技巧如字体图标、CSS Sprites等，不过我不推荐。用字体图标不如用SVG。使用了SPDY和data url后，CSS Sprites完全没有必要用了。再有各种特定的图片问题，超出了一般优化的范畴。如许多手机浏览器有黑夜模式，其中有的浏览器允许定制黑夜模式；有的手机浏览器允许在用户开启不加载图片选项的情况下让开发者设置必须加载的图片（有点绕）；又如许多手机浏览器有所谓云加速模式，即在服务器端对图片进行处理后再发送给客户端，应该返回怎样的图片给这些服务器有待研究和实践。10. 最后是responsive设计所需的图片优化，可能要产生多套不同大小和分辨率的图片，配合media query、以及srcset属性、picture元素、src-N等标准提案，这个话题比较大，尚未形成普遍认可的最佳实践，这里也不多展开了。以上。41119 条评论分享收藏感谢收起92 条评论分享收藏感谢收起