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

最新推荐文章于 2021-06-07 19:07:45 发布
最新推荐文章于 2021-06-07 19:07:45 发布
阅读量941 收藏
点赞数
分类专栏： 网站制作 文章标签： div class url html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blue0cean/article/details/4961515
版权
本文介绍了一种通过HTML和CSS将大背景图拆分成多个小背景图的方法，利用div的嵌套结合background-position属性进行精确定位，分别展示了如何设置不同部分的背景图片。
摘要由CSDN通过智能技术生成

为了页面显示方便，我将页面分为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); back

最低0.47元/天 解锁文章
blue0cean
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于DIV块背景图设置问题
ytrf2541的专栏
12-03 1275
<br />如果对于不同宽度的DIV,我想用同一图片来作为背景，那么怎么设置才能让图片的宽度自动适应不同的DIV,<br />而不用rereat-x之类的把背景放一个div，让这个div放在其他div的下面<br />我想说的是比如一个50px宽的图片，假设同时作为宽度为200px和500px的DIV块的背景，<br />怎么才能让图片自动铺满整个DIV的宽度而不是采用repeat的方法<br />把背景放一个div，里面放图 width=100%，让这个div放在其他div的下面<br />原来css3里
在div底部显示背景图片实现代码
01-19
下面代码实现div层背景图片在底部显示： 复制代码代码如下: div { background:url(/images/bg.jpg) no-repeat fixed; background-position-y:bottom; } 代码详解： 复制代码代码如下: div { background-image:url...
html div分割,html – 同名div将文本中的背景分割为position：static
weixin_32519927的博客
06-07 125
两个元素都在同一层,就像它们是兄弟姐妹一样.这使他们在同一个平面上.所以实际上你的两层是这样的：TextText_ _ _ _ _ _ _ _ _ _可以安全地假设第二个元素将堆叠在另一个元素的顶部,因此当你使它们都占据相同的空间时,它会将它们合并在一起,如下所示：TextText_ _ _ _ __ _ _ _ _这有点像两副卡片,然后将它们推到一起.现在这都是基于它们的默认显示值块,这使它们...
html背景图片大小嵌套,div嵌套div 背景图片 不显示的问题
weixin_42503482的博客
06-04 2322
这几天在做一个小Demo的时候碰到了如上的问题，一个DIV嵌套多个DIV时，父容器DIV不显示背景图片。同时结合之前碰到类似的问题，我归纳了如下几个解决方法：1.就是常见的 子div背景把父div的背景给盖住了，例子：该例子就是 我有一个父div和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的，其中父div的背景图片就是上面这张图片(箭头部分是透明的)，子div的背景图片是那种渐变灰...
div面板分割效果
mrjimin的博客
05-06 1610
使用原生js、html+css简单实现div面板分割效果（横向、纵向） 完整html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.
div 嵌套 图片
weixin_30649641的博客
01-19 330
<style>* { margin: 0; padding: 0; }.video { width: 2px; position: relative;}.v1,.v2 { width: 200px; height: 145px; position: relative; right: -80px; top: 10px; z-index: 3 }.v2 { height:18px;b...
利用jQuery和CSS将背景图片拉伸
10-23
在Web开发中，背景图片拉伸是一个常见的需求，它允许在页面中展示一张大尺寸的图片，并使其随着浏览器窗口的大小变化而自动调整，达到类似桌面壁纸的铺满效果。本文介绍了两种实现背景图片拉伸的方法，一种是利用CSS...
大背景图片的jQuery切换功能导航栏
01-23
在这个主题中，我们将深入探讨如何利用jQuery创建一个具有切换功能的大背景图片导航栏。 首先，我们需要理解导航栏的基本结构。导航栏通常位于网页顶部，包含一系列链接，帮助用户快速访问网站的不同部分。为了实现...
【ibokan】DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
HTMl5自由者
03-07 6126
一、背景图合并：          div+css+ps合图相结合的技术；通过精确到1px的css设置，使用ps合成背景图片，特别是小图片合并，来完成页面效果。          首先讲讲三层嵌套原理：              ①要做成这个效果，用ps软件抠出这一栏目                     ②继续抠图，截出三张这一的小图标，高度务必一样的大小，才
html怎么把俩个图片用div嵌套在一起,css – 如何将两个div放在一起？
weixin_31190113的博客
06-04 1081
浮动一个或两个内部div。浮动一个div：#wrapper {width: 500px;border: 1px solid black;overflow: hidden; /* will contain if #first is longer than #second */}#first {width: 300px;float:left; /* add this */border: 1px sol...
div里面包含3个按比例分割的div
qq351943923的博客
07-28 3253
只是收集几种方式供选用！ 子div没有float   子div一定要指定高度！否则会无效 （指定高度 float：左右都行） 但是假如没有指定父元素div的的高度 那么父元素也要float 这样才能跟着子元素最高元素有相同的高度 &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=g...
Vue里面的div套用背景图片
姚辉乾
01-22 4627
&lt;div class="image_con" :style="{backgroundImage:'url('+list_datas.image+')'}"&gt;&lt;/div&gt;
怎么给div加背景图片
热门推荐
qq_41683305的博客
05-11 5万+
<div style="background: url('img/news images/News-flash_01_02.png');height: 306px;width: 1300px;"> 注意：url的路径一定要加’'
div嵌套div 背景图片 不显示的问题
weixin_30889885的博客
05-29 990
这几天 在做一个小Demo的时候碰到了如上的问题，一个DIV嵌套多个DIV时，父容器DIV不显示背景图片。同时结合之前碰到类似的问题，我归纳了如下几个解决方法： 1.就是常见的 子div 背景把父div的背景给盖住了，例子： 该例子就是 我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的，其中父div的背景图片就是上面这张图片（箭头部分是透明的），子div...
实现图片分割---产生多个div分割图片 使用for和二维数组来设置背景定位
小漠007的专栏
10-25 2064
生成多个div 动态改div添加背景 鼠标经过的时候 div显示 实现上色的效果 不过还能拓展很多东西，希望 大家可以多多指导 如果有开发新的效果 还望指导
div如何自适背景图片的大小
最新发布
06-08
要让 div 自适应背景图片的大小，可以使用 CSS 的 background-size 属性，将其设置为 cover 或 contain，具体如下： ``` div { background-image: url('your-image-url'); background-size: cover; /* 或者 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值