最近写了一些 HTML 的东西,有两个经验作为笔记记录一下,免得以后碰到了,又抓瞎了。

背景图片上再画一些图片元素

如果网页上已经有了一个背景图片,这时还希望在这个背景图片上加上网格点或是其它有一定透明度的背景图片,甚至于更复杂一点的情况,再平铺的背景图片可能只需要覆盖一部分网页,比如说除了页脚的部分。

<p>
  需要做出这种效果,最好的办法,就是把你需要覆盖的部分网页再用一个 div 框架组合起来,然后设置这个 div 框架的背景图片为需要展示的网格或是其它内容。同时注意,关键的一步是,你需要设置这个 div 的 padding(上下左右或是其中的某个部分)值,使得 div 框架覆盖到你需要覆盖的部分。
</p>

<p>
  至于这个尺寸的计算,基本上只能使用 Javascript 来根据浏览器和文档的高度、宽度,根据页面里已经有的 DOM 元素(比如说页脚)尺寸来计算。
</p></p>

让 div 紧贴底部还能自动拉伸

假设一个 div 内部有三个 div,自动从上到下排列。如果我们想让内部的三个 div 还是这个顺序排列,但让它靠在下面,让其上面留有空隙。或是反过来,让这三个 div 靠在上面,底下留一部分空隙出来。

<p>
  这两种效果都可以用 padding 来解决,其实,大部分的 div 排版问题,都可以使用 padding 来解决。
</p>