css3背景图片等比例缩放铺满全屏

2017-12-4 15:19| 发布者: admin| 查看: 775| 评论: 0|来自: 蚂蚁部落

在实际应用中可能有这样的需求,那就是让网页有一个铺满全屏的背景图像,并且这个图片是等比例缩放的,也就是说不会出现变形的状况,使用css3可以轻松的实现此功能,代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
html{
  background:url(mytest/demo/antzone.jpg) no-repeat center center fixed;
  background-size:cover;
}
</style>
<body> 
 
</body> 
</html>

上面的代码实现了全屏自适应的要求,并且图片会等比例缩放,不会出现变形现象。

background-size可以参阅Background-size属性用法详解一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部