CSS图书馆 » HTML & CSS » 使用全屏背景的网页设计欣赏 & 全屏网页背景教程

使用全屏背景的网页设计欣赏 & 全屏网页背景教程

发表于: HTML & CSS, 网页设计 & 灵感. 评论 (3)
赞助商链接

全屏的大背景网站之前分享过不少,这是2012年以及2013年的设计趋势,适合用全屏背景的网站有很多,比如摄影类、建筑类、餐厅美食行业等等。全屏背景不仅仅是一些插画及设计图,也可以是真实的摄影图,当然也要控制好图片的大小了。

下面设计达人将会教大家如果设置全屏背景以及分享一些全屏背景的网页设计案例。

方法1:利用CSS样式让背景全屏于整个网页

利用CSS是非常方便的一种方法,缺点就是要IE9以上才能支持。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

兼容性:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+
  • Firefox 3.6+

方法2:使用jQuery

这个方法是不错的,兼容IE7+ 如果制作中文站,哪么推荐大家使用jQuery这个方法。

HTML代码:

<img src="images/bg.jpg" id="bg" alt="">

CSS代码:

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery代码:

$(window).load(function() {    

	var theWindow        = $(window),
	    $bg              = $("#bg"),
	    aspectRatio      = $bg.width() / $bg.height();
	    			    		
	function resizeBg() {
		
		if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
		    $bg
		    	.removeClass()
		    	.addClass('bgheight');
		} else {
		    $bg
		    	.removeClass()
		    	.addClass('bgwidth');
		}
					
	}
	                   			
	theWindow.resize(resizeBg).trigger("resize");

});

兼容:

  • IE7+
  • 任何桌面浏览器

另外还有一个支持网页全屏背景的jQuery插件:jQuery.fullBg 使用方法很简单,自己看原文哦。

使用全屏背景的网页设计作品欣赏

Universe of Fringe

全屏背景的网页设计欣赏 - 设计达人

Avioc Design

全屏背景的网页设计欣赏 - 设计达人

Awesome

全屏背景的网页设计欣赏 - 设计达人

Two Minute Teacher Test

 设计达人 - 全屏背景的网页设计欣赏

Edboard

全屏背景的网页设计欣赏-设计达人

Beercamp 2012

全屏背景的网页设计欣赏 - 设计达人

Johan Reinhold

全屏背景的网页设计欣赏 - 设计达人

The Yield

全屏背景的网页设计欣赏 - 设计达人

Treme

全屏背景的网页设计欣赏 - 设计达人

Welikesmall

全屏背景的网页设计 - 设计达人

Colossal Media

全屏背景的网页设计欣赏 - 设计达人

Hugs For Monsters

全屏背景的网页设计欣赏 - 设计达人

Made For Humans

全屏背景的网页设计欣赏 - 设计达人

Norbanho

全屏背景的网页设计欣赏- 设计达人

The Camry Effect

全屏背景的网页设计欣赏 -设计达人

25 Days of Giving

全屏背景的网页设计欣赏 - 设计达人

Awkward

全屏背景的网页设计欣赏 - 设计达人

Bark to work

全屏背景的网页设计欣赏 - 设计达人

Chrome Web Lab

全屏背景的网页设计欣赏 - 设计达人

Designed To Move

全屏背景的网页设计欣赏 - 设计达人

Drip

全屏背景的网页设计欣赏 - 设计达人

El Monstruo

全屏背景的网页设计欣赏 - 设计达人

inTacto´s 2012

全屏背景的网页设计欣赏 - 设计达人

Letters.Inc

全屏背景的网页设计欣赏 - 设计达人

Tobias Ahlin

全屏背景的网页设计欣赏 - 设计达人

看了这些网站设计案例,是不是觉得不次于FLASH效果呢?如果喜欢全屏背景的网页设计作品,请浏览点击这里浏览更多。
PS:如果喜欢本文,请记得分享至你的微博、朋友们并关注我们的新浪微博哦!

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。