html让背景图片自适应填充整个页面的两种方法


第一种:使用background-size:cover;

background-size属性指定背景图片大小。

注意浏览器兼容。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景图片自适应填充整个页面</title>
</head>
<style>
body{background: url(u=3577773561,2706257243&fm=26&gp=0.jpg) no-repeat;background-size:cover;}
</style>
<body>
</body>
</html>

=============================================================================

第二种:background-size:100% 100%;background-attachment:fixed;

background-size属性指定背景图片大小。

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

注意浏览器兼容。

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景图片自适应填充整个页面</title>
</head>
<style>
body{background: url(u=3577773561,2706257243&fm=26&gp=0.jpg) no-repeat;background-size:100% 100%;background-attachment:fixed;}
</style>
<body>
</body>
</html>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM