首页 > 网页采用一张1920×1080图片作为背景,有何弊端?

网页采用一张1920×1080图片作为背景,有何弊端?

目前大部分网页均是用白色或是灰白色作为背景,如果用一张1920×1080图片作为背景,我想弊端无非就是多增加了加载文件的大小,但是如果用ps压缩控制在100kb左右,也没太大影响吧,一个网页多增加几张图片也许就超过100kb了,比如下方这个效果图:

背景用一种渐变式色彩1920×1080图片,增加了网页的唯美,但国内很少或是几乎没有采用这种方案的,那有何弊端?


允许的话 可以用css3 , 判断浏览器,现代浏览器用样式, 旧浏览器 可以用图片.


可以的啊,连百度这种网站的主页也是可以设置一张高分辨率照片做背景。你只要做好“另外一种界面设计来应付用户加载不了图片”的情况就行了


天朝网速慢,牺牲审美,为了带宽~~~


国外也会采用这种方案吗?
老外的虚拟主机租用早就进入了按流量计费的年代了!难道他们不怕流量爆表?


这个效果图。。。。。的背景图的意思。。。不是说有个背景图。。而是为了看起来好看才加的一个背景图。。。。。。。。。。。


先弄个模糊的,颜色少的图片占位,domready后,替换背景图为高分图~


如果是我的话,我会喜欢全图的设计。但是一般全图都是模糊的,前面加个遮罩层,什么画质都不重要了。当然,没有遮罩层的设计则更加震撼。比如:你可以看下
Ghost Blog的官网

和designmodo工作室出品的前端付费框架“startup”的设计。

这些优秀的设计,哪一个少了图,甚至有用巨幅(低码率)视频做背景的。如果大家觉得我发的这两个大神作品应该是有说服力的吧。简洁,大图和高互动性是未来的趋势。

当然具体到细节和为什么不建议使用大图,大家说的都有道理。但是我觉得细节是可以用技术克服的,但是思想的围栏都是用来突破的。

时代在发展,有些约定俗成的东西,有朝一日有都可能成为过往云烟,比如WEB安全色和960px设计。

补一个网站,刚刚发现的,Google老大的网站


要看具体是什么背景。


你可以在我这个网速下 试一试打开网站 ...

少年 眼睛会哭瞎的啦   ˋ(′~‵)ˊ


图片始终不是好的选择,等到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)

  1. 如果是桌面,一切好办,不支持CSS3就image,支持就css3-static或css3-dynamic
  2. 如果是移动端,考虑多种因素之后,比如用户设置,机器性能,分辨率,可以在css3和image里选一个,如果机器老旧且在移动网络上,既不能渲染也不能耗流量,只好css-fallback或者支持css3就强制用css3渲染

首先,设计成这个样子,背景即便是用单色(灰色),效果也不会太差。
其次,可以考虑小块背景图平铺。
再其次,既然设计图都这么讲究了,就别考虑那么多了,怎么好怎么来。

如果是个人站点,或者访问量不是特别大,那我说个跑题的事,以前写博客的时候每次都特别在意配图的大小,一般都是几十K甚至十几K,后来觉得效果最重要,300K的图也往上放,显示效果好了,也没说影响多大。

题主考虑一下自己的目标用户是哪些,他们是怎样的设备和网络质量。


100K的图片现在算大么。
如果是效果美观的话,100K算的了什么。


注:本答案只按提问要求列出弊端,无意否定大图设计的合理性。


knewone 首页改版后就是1920X1200的背景图~
饿了么首页用的是1440X900的背景图(之前用过HTML5和CSS3实现的随着时间变化显示太阳啊月亮什么的背景图,记不清楚了。)
你可以参考一下。

没什么是不行的,一切取决于你的产品设计和业务需求。

防止在高分辨率的电脑上显示效果比较虚的办法就是直接把图片弄虚了不就好了...==! 本来就是背景图...就跟摄影一样,一些是为了突出主题。虚化才会使得主体变得更突出...当然..还是取决于设计。

浏览器兼容性的问题取决于网站定位的用户群体

比如,knewone这种专注于新奇产品的网站,用IE6的人根本就不是他的用户群体,显然压根就不用太考虑IE兼容性的问题。而饿了么服务于学校周边的学生,服务群体相对来说比较广,而且参差不齐,他就需要一些在落后浏览器上的替代方案。

你例子中这种渐变和光晕效果背景,我觉得用CSS实现更好一些。

【热门文章】
【热门文章】