在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. [Angular 8] Keep original DOM structure with ng-container

    ng-container is using for grouping elments together, a bit similar to div. If you want to group some ...

  2. 学到了林海峰,武沛齐讲的Day35 完 协程

    day3    requests.get  爬网页 greenlet  协程模块  还有asy!!!模快(后续版本) day4    事件驱动 day5    基础学习 day6    基础学习 da ...

  3. Safe Path（bfs+一维数组存图）

    题目链接:http://codeforces.com/gym/101755/problem/H 题目分析:先bfs一遍怪兽可以到达的点,再bfs人可以走的地方看可不可以到达终点: 很显然读到  2&l ...

  4. Magma中ECC的点乘实例

    a:=-3;b:= 41058363725152142129326129780047268409114441015993725554835256314039467401291;E:= Elliptic ...

  5. [mysql8]新坑哈 更改Mysql 表的大小转换设置lower_case_table_names=1

    在安装了8.0.14之后,初始化的时候在my.cnf里设置了lower_case_table_names=1,安装好了之后,启动报错: 1 2 3 4 5 2019-01-28T13:24:24.91 ...

  6. SpringCloud：搭建微服务项目框架 microservicecloud

    1.搭建整体父工程 microservicecloud 新建父工程microservicecloud,切记是Packageing是pom模式 主要是定义POM文件,将后续各个子模块公用的jar包等统一 ...

  7. C#中的线程之Abort陷阱

    .简介 C#中通常使用线程类Thread来进行线程的创建与调度,博主在本文中将分享多年C#开发中遇到的Thread使用陷阱. Thread调度其实官方文档已经说明很详细了.本文只简单说明,不做深入探讨 ...

  8. MyBatis项目配置案例详解与Web下的增删改查实现[附项目源码]

    MyBatis项目案例 项目图示: 项目源码地址:https://github.com/JluTiger/mybatispro 1.项目功能 项目案例:后台管理系统用户数据维护平台 所有用户数据查询 ...

  9. GO语言网络编程

    socket编程 Socket是BSD UNIX的进程通信机制,通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.Socket可以理解为TCP/IP网络的API,它 ...

  10. 根据字符串从资源中取出对应的资源ResourceManager.GetObject

    ResourceManager.GetObject 根据名称从资源中取出资源 需要:我有25张 五笔图片名称是a b c d ...y 这样组成的 每张图片名字只有一个名字 我想通过字符串a取出a这张 ...