/*定义层的基本样式*/ #float-layer{ position:fixed; top:50%; left:50%; width:200px; height:200px; margin-top:-100px; margin-left:-100px; z-index:1; } /*定义背景图片样式*/ #float-bg{ position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('background.jpg'); opacity:0.5; z-index:-1; }
以上代码中,大家首先定义了一个层的基本样式,即float-layer。其中,position为fixed,表示该层的位置是固定的;top和left分别为50%,表示该层的位置在页面水平和垂直方向上的中央;width和height均为200px,表示该层的尺寸;margin-top和margin-left分别为-100px,表示该层向上和向左移动自身尺寸的一半,使其完全居中;z-index为1,表示该层的层级为最高,即最上层。
接下来,大家再定义一个背景图片样式,即float-bg。其中,position为absolute,表示该层的位置是相对于float-layer层的;top和left均为0,表示该层与float-layer层重合;width和height均为100%,表示该层的尺寸与float-layer层相同;background-image为一个图片文件的URL,表示该层的背景图片;opacity为0.5,表示该层的透明度为50%;z-index为-1,表示该层的层级为最低,即最底层。
最后,大家将两个层组合在一起,即在HTML代码中插入如下代码:
<div id="float-layer"> <div id="float-bg"></div> <p>这是固定浮动层的内容</p> </div>
这样,大家就成功实现了一个带背景图片的CSS图片固定浮动层效果。