在轮播图上放置黑色阴影背景

为了在轮播图上可以显示一些文字，需要轮播图上渲染一层衬字背景，一般色调是黑色透明背景衬白字。在加黑色背景的过程中，由于轮播结构已成型，所以添加过程较为艰难。

层次的添加需要考虑图层在文档流中的顺序。主要根据css中的z-index属性来进行设计。

我在设计时由于没有提前对一些元素进行定位，导致z-index属性无效。z-index属性必须是在元素定位以后生效。所以我在受到影响的所有元素（例如一些网页中的logo，隐藏div，以及轮播的按钮等）中进行了定位的设置，然后分别再设置z-index。设置原则是值越大越接近用户。代码贴图：

//html<div class="container-body">  <div class="switch_img">    <ul>      <li>        <a href="#">          <image src="images/货物.jpg"></image>        </a>      </li>      <li id="lid">        <p id="pid">国际化物流仓储基地</p>        <a href="#">          <image src="images/物流基地.jpg" id="imgId"></image>        </a>      </li>      <li>        <a href="#">          <image src="images/搬运.jpg"></image>        </a>      </li>    </ul>    <ol>      <li class="current"></li>      <li></li>      <li></li>    </ol>  </div>

//CSS.container-body .switch_img ul{  position: relative;  width:6400px;  height:600px;}.container-body .switch_img ul>li{  list-style: none;  float: left;  width: 1600px;  height:600px;}.container-body .switch_img #lid{  position: relative;  //left:1600px;  //width:100%;  height:100%;  background-color: @fBlack;}.container-body .switch_img #imgId{  position: relative;  z-index:-2;}.container-body .switch_img #pid{  position: absolute;  left:30%;  top:40%;  color: @fWhite;  font-size: 40px;}

心得：以后使用css，首先对元素进行一个定位，然后再设置盒子模型，最后设置一些其他属性。对每个元素定位以后，方便z-index属性的设置，不会出现，网页中元素的错位。

在设置好的背景上进行点击操作时，对应的li标签会产生蓝色默认背景。此时需在body中全局添加：

-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;