背景图片拉伸效果（css3支持）

最新推荐文章于 2025-05-14 15:56:42 发布

黑马蓝梦

最新推荐文章于 2025-05-14 15:56:42 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript+jQuery+ExtJS HTML+CSS

本文链接：https://blog.youkuaiyun.com/resigshy/article/details/8161176

JavaScript+jQuery+ExtJS 同时被 2 个专栏收录

17 篇文章

订阅专栏

HTML+CSS

4 篇文章

订阅专栏

本文介绍如何使用CSS3实现背景图片的自适应拉伸效果，确保图片能够完整覆盖整个浏览器窗口，同时提供了jQuery代码来调整body的高度和宽度，使页面在不同分辨率下都能保持良好的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
 <head>
  <title>背景图片拉伸效果（css3支持）</title>
  <style type="text/css">
  body{
	padding:0;
	margin:0;
	overflow-x: hidden;
	background:url(ss.jpg) center no-repeat;
	background-size:cover;
  }

  </style>
  <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  <script type="text/javascript">
	$(function(){
		function resizeBody(){
			$("body").height($(window).height() - 2).width($(window).width() - 2);
		}
		resizeBody();
		
		$(window).resize(function(){
			resizeBody();
		});
	});
 </script> 
 </head>
 <body>  
 </body>
</html>