在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. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  2. C程序的函数说明使用和特点说明第一节

    一.函数的特点: 全部都是全部函数构成 面向过程的:是函数式语言 函数的调用 是按需调用 封装包含 二.程序中函数的作用: 可以使用函数使程序变的简短 和 清晰 提高代码重用性 提高开发效率 有利于程 ...

  3. #505. 「LibreOJ β Round」ZQC 的游戏

    题目描述 首先一定是让ZQC吃掉他能吃到的所有的球,这样才能尽可能的满足ZQC的质量是所有玩家中最大的. 在满足某一个玩家的质量不会超过ZQC的情况下,让这个玩家吃掉尽可能多的球,让其他玩家吃掉的尽可 ...

  4. Java中的读文件，文件的创建，写文件

    前言 大家好,我是 Vic,今天给大家带来Java中的读文件,文件的创建,写文件的概述,希望你们喜欢 示意图 读文件 public static void read(String path,Strin ...

  5. Ceilometer和Gnocchi的监控架构解析

    1  采集模块整体架构 采集模块主要分为三大块. Ceilometer:用于采集数据并处理数据后发送到gnocchi服务去存储 Gnocchi:用于将采集数据进行计算合并和存储并提供rest api方 ...

  6. 1066 Root of AVL Tree (25）

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  7. c标签简单应用

        <pager:column  property="ly" title="任务类型" width="10%">       ...

  8. nginx压力测试和并发预估

    一.Nginx并发预估 预估算法:{(?G)*1024-system}/请求大小 (?G):表示内存大小1024:表示内存容量标准进制system:表示系统和服务占用的额外内存和需要预留的内存请求大小 ...

  9. 开放-封闭原则（OCP）

    怎样的升级才能面对需求的改变却可以保持相对稳定,从而使得系统可以在第一个版本以后不断推出新的版本呢?开放-封闭原则(The Open-Closed Principle, OCP)为我们提供了指引.软件 ...

  10. django部署后样式加载不出来解决方案

    django部署后样式加载不出来 1.html文件去掉<!DOCTYPE html> 2. location /static { alias /home/static/; } 3.STAT ...