在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. Kubernetes 学习8 Pod控制器

    一.回顾 1.Pod是标准的kubernetes资源,因此其遵循为其资源清单配置定义的基本格式,包含:apiVersion,kind,metadata,spec,status(只读) 2.spec的内 ...

  2. C# Ninject使用

    Ninject是一个IOC容器,用来解决程序中组件的耦合问题,它的目的在于做到最少配置.简单来讲就是 为我们选择一个想要的类来处理事务. 百度百科的解释:一个快如闪电.超轻量级的基于.Net平台的依赖 ...

  3. AQS面试题

    问:什么是AQS? 答:AQS的全称为(AbstractQueuedSynchronizer),这个类在java.util.concurrent.locks包下面.AQS是一个用来构建锁和同步器的框架 ...

  4. 【概率论】6-3:中心极限定理(The Central Limit Theorem)

    title: [概率论]6-3:中心极限定理(The Central Limit Theorem) categories: - Mathematic - Probability keywords: - ...

  5. coturn编译运行在Windows平台

    turn 编译安装到Windows平台 https://www.webrtc-experiment.com/docs/TURN-server-installation-guide.html#windo ...

  6. 服务器上build.xml文件乱码解决（亲测有效）

    前提条件:必须root账户登录系统,否则无权限 1. 修改/etc/sysconfig/i18n: 拷贝如下内容到文件中 #LANG="zh_CN.UTF-8" LANG=&quo ...

  7. 三层设备-SHRP详解

    步骤:3-sw1enconf tvlan databasevtp domain s2t117vtp servervlan 10vlan 20vlan 30vlan 40exitint r f0/7 - ...

  8. tecplot-计算合速度的一种方法

    原视频下载地址: http://yunpan.cn/cudFwWr8tFsxV  访问密码 75a8

  9. gitconfig别名配置

    vim ~/.gitconfig 进行配置 [user] name = Your Name email = you@yourdomain.example.com [core] editor = vim ...

  10. 用java将简单的word文档换成pdf文档

    用java将简单的word文档换成pdf文档的方式很多,因为很多都没有实际测试过,所以这里就先泛泛的说一下 整体上来看分两种: 1.纯java代码实现,有很多优秀的开源软件可以用,比如poi,itex ...