在HTML里，由于浏览器显示器等差异，浏览器的宽度也会有变化，为了适应不同的宽度，需要用到平铺。
例如页面前面的固定的条等，如果是纯色，可以用背景色，如果不是纯色，是渐变等，可以用条状图平铺。
常见的布局方式一般有table和div，如果需要单个图片和渐变平铺都需要，则不能放到一个td里，或一个div里。
可以的形式：
图片是固定大小的：
div(固定宽高，盛放图片）div(盛放条状平铺）两个div并排float。
div(固定宽高，背景图）div(盛放条状平铺）两个div并排float。
div(盛放条状平铺），div(固定宽高，背景图）嵌套进前的div。

例如前面博文（相关博文：），页面上面的条状，为了方便管理，上面的元素统一放到大分区里名字叫header的div里，可以给header平铺渐变的条状图，该大div设置为100%，然后里面嵌套一个小div盛放图片，这里盛放的是背景图。
这样header的div里就有了本身平铺的条状背景图，和嵌套在里面的小div的背景图。
代码：

</head>

<body>

<div id="header" style="background-image:url(images/topb2.jpg);width:100%;height:200px;">

<div style="background-image:url(images/topb1.jpg);width:176px;height:200px;"></div>

</div>

省略。。。。。

<div id="footer" style="background-image:url(images/bom2.jpg);width:100%;height:200px;clear:both;">

<div style="background-image:url(images/bom1.jpg);width:176px;height:200px;"></div>

</div>

</body>

图示：

但是这种切片方式，如果后期需要改的话，而前面的图片没有分层的情况下，不好改。
如果有分层图备份的话，直接替换背景渐变再切两个也比较麻烦，但是比没有分层图备份要容易。
如果是用上诉方式，要改渐变，就要改两张图，切条和图片都要改，没有分层还有把图片选区处理，但图片一旦合成，由前面的博文（相关博文：PS弧形边缘的去黑色背景色）可知，越复杂的图片越难分层还原回去，再选区回分层图就有误差。
所以还可以这样做，渐变和图片分开，这样改图就改图，不动渐变，改渐变就改渐变，不需要改图，两者分开，就更容易修改了。
需要改渐变，只需要做个渐变，切个条，需要改图，就可以把透明图改掉。

这种情况下，可以嵌套div，也可以分两个div，一个背景图渐变平铺并且盛放那个透明图，但是这样修改渐变平铺要修改两个div的背景。
嵌套可以只修改一次，大div盛放背景渐变，内部小div盛放透明图（或把透明图设置成背景图）
简单点说，就是背景平铺和图片分开，这样改哪个只改一个就行。

HTML布局排版2 div的和图片平铺方便管理的更多相关文章

  1. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

  2. Duilib技巧：背景图片平铺

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  3. android实现图片平铺效果&WebView多点触控实现缩放

    1.图片平铺效果实现非常简单,只要在xml中添加一个 android:tileMode的属性就可以了.首先在drawable文件夹中添加自己的my.xml文件.代码: Java代码 <?xml ...

  4. Canvas 图片平铺设置

    /** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!ca ...

  5. [UWP]通过自定义XamlCompositionBrushBase实现图片平铺

    1. 什么是XamlCompositionBrushBase 我早就想试试自定义XamlCompositionBrushBase,但一直没机会.上一篇文章介绍到使用Win2D的BorderEffect ...

  6. LODOP中设置设置图片平铺水印，超文本透明

    之前的博文:LODOP中平铺图片 文本项Repeat. 该博文中是平铺的图片,上面是文本.如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过 ...

  7. iOS UIButton 设置图片平铺

    UIImage *image2 = [UIImage imageNamed:imgName]; CGFloat top = ; // 顶端盖高度 CGFloat bottom = ; // 底端盖高度 ...

  8. Android中设定背景图片平铺。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...

  9. 一款js控制背景图片平铺

    背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...

随机推荐

  1. HTML 009 select

    本篇文章并非描述HTML中的select标签, 而是描述JSP中的<s:select> 关于HTML中的select标签, 以及和JSP中的<s:select>的相同以及差异后 ...

  2. Deepgreen/Greenplum 删除节点步骤

    Deepgreen/Greenplum删除节点步骤 Greenplum和Deepgreen官方都没有给出删除节点的方法和建议,但实际上,我们可以对节点进行删除.由于不确定性,删除节点极有可能导致其他的 ...

  3. PostgreSQL 恢复大法 - 恢复部分数据库、跳过坏块、修复无法启动的数据库

    转载自:https://yq.aliyun.com/articles/582880 背景 一个较大的数据库,如何只恢复一部分数据(例如只恢复某个DB). 如果访问有坏块的表. 如何从无法启动的数据库中 ...

  4. Kubernetes 学习11 kubernetes ingress及ingress controller

    一.上集回顾 1.Service 3种模型:userspace,iptables,ipvs 2.Service类型 ClusterIP,NodePort NodePort:client -> N ...

  5. SSH远程连接虚拟机，将虚拟机映射本地端口

    本周学习内容: 1.继续学习了网络是怎么连接的和JavaScript的内容: 2.使用JavaScript实现在页面打印九九乘法表,将编写的乘法表部署到本地IIS服务器: 3.安装sshd服务,使用S ...

  6. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  7. leaning java swing 为组件设置边框

    import javax.swing.*; import javax.swing.border.BevelBorder; import javax.swing.border.Border; impor ...

  8. Windows异常

    一.什么是异常 异常指的是在程序运行过程中发生的异常事件,通常是由外部问题(如硬件错误.输入错误)所导致的.简单来说异常就是对于非预期状况的处理,当我们在运行某个程序时出现了异常状况,就会进入异常处理 ...

  9. 【MongoDB】在C#中使用

    一.MongoClient类 在2.10.0版本中引入了MongoClient类,同时在其API中也说明了Mongo类会在将来的版本中被MongoClient替换(Note: This class h ...

  10. 数据库（以MySQL为例）

    一.数据库简介 数据库就是数据的仓库,用来按照特定的结构去组织和管理数据,有了数据库可以更加方便.便捷的操作需要保存的数据 不管是什么数据库,最终都是将数据保存到硬盘中,只是存储的格式不同于文本文件 ...