欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

DIV+CSS焦点图文幻灯片 特效文字背景半透明

JQ+js插件的css+div图文焦点幻灯片特效,可选取焦点任意选择幻灯片内容,幻灯片文字内容背景为半透明浮于图片上方,图文使用div+css布局利用优化。可根据需求更改css达到想要的宽度高度效果适合自己css布局需求。

文字背景半透明幻灯片特效
DIV+CSS+JS特效之文字背景半透明焦点幻灯片特效

本特效可更加自己需求进行更改,比如特效宽度、高度、边框等样式实现自己所需的布局,图文分开于html代码中,可直接程序实现规律替换更改。

本特效特点,幻灯片图文中的文字部分背景为半透明,悬浮于图片上方,极其美观大方。

关于半透明 透明相关文章:
1、CSS背景半透明
2、ie6 png透明

HTML源代码部分:

  1. <div class="w310"> 
  2. <!--foucs--> 
  3. <div id="fsD1" class="flash"> 
  4.     <div id="D1pic1" class="fPic" bossZone="PicFocus"> 
  5.         <div class="fcon"> <a target="_blank" href="#"> <img alt="泸州一信鸽坠落死亡"
     
    src="images/90464702.jpg" width="310" height="228" /></a> 
    <span class="shadow"> <a target="_blank" href="#">泸州一信鸽坠落死亡 "同伴"苦守不离</a></span> </div> 
  6.         <div class="fcon"> <a target="_blank" href="#"> 
    <img alt="芦山灾区儿童普通画作拍卖 拍出近万元" src="images/90716307.jpg" width="310" height="228" /></a>
     <span class="shadow"> <a target="_blank" href="#">芦山灾区儿童普通画作拍卖 拍出近万元</a></span> </div> 
  7.         <div class="fcon"> <a target="_blank" href="# ">
    <img alt="重庆1000src="images/90635572.jpg" height="228" /></a>
    <span class="shadow"> <a target="_blank" href="#">娱乐场所</a></span> </div> 
  8.          
  9.         <div class="fcon"> <a target="_blank" href="#"> <img alt="拉豪车接送"  
  10.  src="images/ds111111111111111111111111.jpg" width="310" height="228" /></a>
    <span class="shadow"> <a target="_blank" href="#">法拉豪车接送 疑与富二代男友复合</a></span> </div> 
  11.   
  12.         <div class="fcon"> <a target="_blank" href="#">
    <img alt="自驾攻略:每张照片都可以当桌面" src="images/u3.jpg" width="310" height="228" /></a>
    <span class="shadow"><a target="_blank" href="#">自驾西藏全攻略:每张照片都可以当桌面</a></span> </div> 
  13.         <div class="fcon"> <a target="_blank" href="#">
    <img alt="为爱减肥25斤 终于穿上婚纱去结婚了" src="images/90747538.jpg" width="310" height="228" /></a>
    <span class="shadow"><a target="_blank" href="#">为爱减肥25斤 终于穿上婚纱去结婚了</a></span> </div> 
  14.          
  15.     </div> 
  16.     <div class="fbg"> 
  17.         <div class="D1fBt" id="D1fBt"> <a href="javascript:void(0)" hidefocus="true" target="_self">
    <i>1</i></a> <a href="javascript:void(0)" hidefocus="true" target="_self"><i>2</i></a>
    <a href="javascript:void(0)" hidefocus="true" target="_self"><i>3</i></a>
    <a href="javascript:void(0)" hidefocus="true" target="_self"><i>4</i></a>
    <a href="javascript:void(0)" hidefocus="true" target="_self"><i>5</i></a>
    <a href="javascript:void(0)" hidefocus="true" target="_self"><i>6</i></a>  
  18. <!--  <a href="javascript:void(0)" hidefocus="true" target="_self"><i>7</i></a>--> </div> 
  19.     </div> 
  20. </div> 
  21. </div> 

在线演示:查看案例

幻灯片特效打包下载:

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao615.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-09-04 12:09 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。