拉伸背景图像

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拉伸背景图像相关的知识，希望对你有一定的参考价值。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 	<title>Stretch background</title>
  6. 	<style type="text/css">
  7. 		html, body {
  8. 			height: 100%;
  9. 			margin: 0;
  10. 			padding: 0;
  11. 			font-family: Verdana, Geneva, sans-serif;
  12. 			font-size: 100%;
  13. 			color: #000;
  14. 			background-color: #FFF;
  15. 		}
  16.  
  17. 		img#bg {
  18. 			position:fixed;
  19. 			top:0;
  20. 			left:0;
  21. 			width:100%;
  22. 			height:100%;
  23. 		}
  24.  
  25. 		#content {
  26. 			position:relative;
  27. 			z-index:1;
  28. 			Margin: 20px;
  29. 		}
  30.  
  31. 		#content p {
  32. 			font-size:80%;
  33. 			font-weight: bold;
  34. 		}
  35.  
  36. 		#content h1 {
  37. 			color:#369;
  38. 			font-size:90%;
  39. 			font-weight: bold;
  40. 		}
  41.  
  42. 	</style>
  43.  
  44. 	<!--[if IE 6]>
  45. 	<style type="text/css">
  46. 		html { overflow-y: hidden; }
  47. 		body { overflow-y: auto; }
  48. 		#bg { position:absolute; z-index:-1; }
  49. 		#content { position:static; }
  50. 	</style>
  51. 	<![endif]-->
  52. </head>
  53.  
  54. <body>
  55. 	<img src="images/stretchbg.jpg" alt="background image" id="bg" />
  56.  
  57. 	<div id="content">
  58.  
  59. 		Content goes here
  60.  
  61. 	</div>
  62.  
  63. </body>
  64. </html>
  65.  
  66. <!-- Original at http://www.texaswebdevelopers.com/examples/stretch-bg.asp -->

以上是关于拉伸背景图像的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 CSS 拉伸表格单元格的背景图像？

拉伸SVG背景图像？

Xcode Ipad 模拟器背景图像拉伸

在css中设置图片的背景图，怎么设置图片纵向拉伸

iPhone X 中的背景图像拉伸

背景图像在 Safari 中未正确拉伸