背景图片自适应大小的方法

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

转载最新推荐文章于 2025-05-14 15:56:42 发布 · 953 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webwangjie/p/9385725.html

文章标签：

#java #python

本文介绍了一种实现网页背景图片全屏显示的方法，通过CSS样式设置html和body的高度为100%，并使用背景图片的no-repeat和background-size属性确保图片能够适应不同屏幕尺寸。

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

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
　　html{
　　　　height: 100%;
　　}
　　body{
　　　　height: 100%;
　　}
　　.i-body{
　　　　height: 100%;
　　}
　　/*需要从html开始一层层设置高度继承，否则无法获取高度*/
　　.i-body1{
　　　　height: 100%;
　　　　background: url('tiankong.jpg') no-repeat;
　　　　background-size: 100% 100%;
　　}
</style>
</head>
<body>
　　<div class="i-body">
　　　　<div class="i-body1"></div>
　　</div>
</html>