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

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

层次的添加需要考虑图层在文档流中的顺序。主要根据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;