为了在轮播图上可以显示一些文字,需要轮播图上渲染一层衬字背景,一般色调是黑色透明背景衬白字。在加黑色背景的过程中,由于轮播结构已成型,所以添加过程较为艰难。
层次的添加需要考虑图层在文档流中的顺序。主要根据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;