利用div嵌套将大背景拆分成小背景图片

最新推荐文章于 2021-06-07 19:07:45 发布

blue0cean

最新推荐文章于 2021-06-07 19:07:45 发布

阅读量991

点赞数

CC 4.0 BY-SA版权

分类专栏：网站制作文章标签： div class url html 文档

本文链接：https://blog.youkuaiyun.com/blue0cean/article/details/4961515

本文介绍了一种通过HTML和CSS将大背景图拆分成多个小背景图的方法，利用div的嵌套结合background-position属性进行精确定位，分别展示了如何设置不同部分的背景图片。

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

为了页面显示方便，我将页面分为top和bottom两部分，利用background-position数值进行背景的定位。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.main{ width:988px; height:671px}
.top1{ width:988px; height:188px;background-image:url(1.jpg); background-repeat:no-repeat; background-position:0px 0px;}
.top2{ width:988px; height:188px;background-image:url(2.jpg); background-repeat:no-repeat; background-position:182px 0px;}
.top3{ width:988px; height:188px;background-image:url(3.jpg); background-repeat:no-repeat; background-position:471px 0px;}
.top4{ width:988px;