Quantcast
Channel: w3cplus
Viewing all articles
Browse latest Browse all 1557

制作全屏背景技巧

$
0
0

在Web的应用与设计中,全屏背景的制作越来越常见。你是使用超大超大的背景图片来实现呢?还是在使用JavaScript脚本来制作呢?我想这些都不是什么非常好的方法。个人认为CSS3中的background-size属性是一个非常NB的属性,能轻松的帮你实现全屏背景制作,简单易懂。

我们只要把需要做为全屏背景的那张图片放在HTML标签中:

html{
	/* 需要全屏的背景图片 */
	background:url('background.jpg') no-repeat center center;

	/* 确保html元素总是占用全部浏览器窗口的高度 */
	min-height:100%;

	/* 实现的关键 */
	background-size:cover;
}

body{
	/* 在移动端更好的工作 */
	min-height:100%;
}

详细的教程可以参考《CSS3 Background-size》,制作全屏背景还可以参考《完美的页面背景图片制作


Viewing all articles
Browse latest Browse all 1557

Trending Articles