• 欢迎访问搞代码网站，推荐使用最新版火狐浏览器和Chrome浏览器访问本网站！
  • 如果您觉得本站非常有看点，那么赶紧使用Ctrl+D 收藏搞代码吧
> 前端 > css > 变化图片-用图片覆盖文章的CSS代码_css

变化图片-用图片覆盖文章的CSS代码_css

css 搞代码 7年前 (2018-06-10) 135次浏览 已收录 0个评论

css代码： 

<style type="text/css">
#info {position:relative; height:660px;}
#adsie {position:absolute; bottom:0; left:0;}
#info b {font-size:14px; font-style:italic;}
#magnifier {display:inline; position:relative; width:640px; height:40px; z-index:100; float:left; margin:0 20px 10px 15px; background:url(fade_in.gif) no-repeat;}
#cover1 {position:absolute; top:0; left:0; width:24px; height:30px; background:transparent;}
#cover2 {position:absolute; top:0; left:48px; width:240px; height:30px; background:transparent;}
#description {position:absolute; top:40px; z-index:-1;}
#magnifier img {position:absolute; width:640px; height:460px; top:30px; left:-9999px; opacity:0;}
#magnifier ul {padding:0; border:0; margin:0; list-style-type:none;} 

#magnifier li {display:block; width:24px; height:24px; position:absolute; left:24px; top:0;  background:transparent;}
#magnifier li.one {left:0;}
#magnifier li:hover {width:24px; height:24px; left:0;}
#magnifier li.ten:hover {width:24px; height:24px; left:24px;}
#magnifier li.one:hover img {width:640px; height:460px; left:-240px; opacity:0.1; z-index:100;} 
#magnifier li.two:hover img {width:640px; height:460px; left:-216px; opacity:0.2; z-index:100;} 
#magnifier li.three:hover img {width:640px; height:460px; left:-192px; opacity:0.3; z-index:100;} 
#magnifier li.four:hover img {width:640px; height:460px; left:-168px; opacity:0.4; z-index:100;} 
#magnifier li.five:hover img {width:640px; height:460px; left:-144px; opacity:0.5; z-index:100;} 
#magnifier li.six:hover img {width:640px; height:460px; left:-120px; opacity:0.6; z-index:100;} 
#magnifier li.seven:hover img {width:640px; height:460px; left:-96px; opacity:0.7; z-index:100;} 
#magnifier li.eight:hover img {width:640px; height:460px; left:-72px; opacity:0.8; z-index:100;} 
#magnifier li.nine:hover img {width:640px; height:460px; left:-48px; opacity:0.9; z-index:100;} 
#magnifier li.ten:hover img {width:640px; height:460px; left:-48px; opacity:1.0; z-index:100;} 
#magnifier li.eleven:hover img {width:640px; height:460px; left:-24px; opacity:0} 
</style>
<!--[if IE 7]>
<style type="text/css">
#magnifier img {left:-9999px; filter: alpha(opacity=0);}
#magnifier li {height:20px;}
#magnifier li.one:hover img {width:640px; height:460px; left:-240px; filter: alpha(opacity=10); z-index:100;} 
#magnifier li.two:hover img {width:640px; height:460px; left:-216px; filter: alpha(opacity=20); z-index:100;} 
#magnifier li.three:hover img {width:640px; height:460px; left:-192px; filter: alpha(opacity=30); z-index:100;} 
#magnifier li.four:hover img {width:640px; height:460px; left:-168px; filter: alpha(opacity=40); z-index:100;} 
#magnifier li.five:hover img {width:640px; height:460px; left:-144px; filter: alpha(opacity=50); z-index:100;} 
#magnifier li.six:hover img {width:640px; height:460px; left:-120px; filter: alpha(opacity=60); z-index:100;} 
#magnifier li.seven:hover img {width:640px; height:460px; left:-96px; filter: alpha(opacity=70); z-index:100;} 
#magnifier li.eight:hover img {width:640px; height:460px; left:-72px; filter: alpha(opacity=80); z-index:100;} 
#magnifier li.nine:hover img {width:640px; height:460px; left:-48px; filter: alpha(opacity=90); z-index:100;} 
#magnifier li.ten:hover img {width:640px; height:460px; left:-48px; filter: alpha(opacity=100); z-index:100;} 
#magnifier li.eleven:hover img {width:640px; height:460px; left:-24px; filter: alpha(opacity=0);} 
</style>
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
#magnifier table {border:0; padding:0; margin:0; border-collapse:collapse;}
#magnifier li {position:static;}
#magnifier img {position:absolute; width:640px; height:460px; top:30px; left:-9999px;filter: alpha(opacity=0);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#magnifier li {height:20px;}
#magnifier a {display:block; width:24px; height:24px; left:24px; top:0; position:absolute; background:transparent;}
#magnifier a:hover {border:0;width:24px; height:24px; left:0;}
#magnifier a.aten:hover {border:0; width:24px; height:20px; left:24px;}
#magnifier a.aone:hover img {width:640px; height:460px; left:-240px;filter: alpha(opacity=10);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10); z-index:100;} 
#magnifier a.atwo:hover img {width:640px; height:460px; left:-216px;filter: alpha(opacity=20);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); z-index:100;} 
#magnifier a.athree:hover img {width:640px; height:460px; left:-192px;filter: alpha(opacity=30);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); z-index:100;} 
#magnifier a.afour:hover img {width:640px; height:460px; left:-168px;filter: alpha(opacity=40);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); z-index:100;} 
#magnifier a.afive:hover img {width:640px; height:460px; left:-144px;filter: alpha(opacity=50);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); z-index:100;} 
#magnifier a.asix:hover img {width:640px; height:460px; left:-120px;filter: alpha(opacity=60);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); z-index:100;} 
#magnifier a.aseven:hover img {width:640px; height:460px; left:-96px;filter: alpha(opacity=70);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); z-index:100;} 
#magnifier a.aeight:hover img {width:640px; height:460px; left:-72px;filter: alpha(opacity=80);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); z-index:100;} 
#magnifier a.anine:hover img {width:640px; height:460px; left:-48px;filter: alpha(opacity=90);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); z-index:100;} 
#magnifier a.aten:hover img {width:640px; height:460px; left:-48px;filter: alpha(opacity=100);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); z-index:100;} 
#magnifier a.aeleven:hover img {width:640px; height:460px; left:-24px;filter: alpha(opacity=0);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index:-1;}
</style>
<![endif]-->

Xhtml代码： 

<div id="magnifier">
<ul>
<li class="one"><!--[if lte IE 6]><a class="aone" href="#nogo1"><table><tr><td><![endif]-->
 <ul>
 <li class="two"><!--[if lte IE 6]><a class="atwo" href="#nogo2"><table><tr><td><![endif]-->
  <ul>
  <li class="three"><!--[if lte IE 6]><a class="athree" href="#nogo3"><table><tr><td><![endif]-->
   <ul>
   <li class="four"><!--[if lte IE 6]><a class="afour" href="#nogo4"><table><tr><td><![endif]-->
    <ul>
    <li class="five"><!--[if lte IE 6]><a class="afive" href="#nogo5"><table><tr><td><![endif]-->
     <ul>
     <li class="six"><!--[if lte IE 6]><a class="asix" href="#nogo6"><table><tr><td><![endif]-->
      <ul>
      <li class="seven"><!--[if lte IE 6]><a class="aseven" href="#nogo7"><table><tr><td><![endif]-->
       <ul>
       <li class="eight"><!--[if lte IE 6]><a class="aeight" href="#nogo8"><table><tr><td><![endif]-->
        <ul>
        <li class="nine"><!--[if lte IE 6]><a class="anine" href="#nogo9"><table><tr><td><![endif]-->
         <ul>
         <li class="ten"><!--[if lte IE 6]><a class="aten" href="#nogo10"><table><tr><td><![endif]-->
          <ul>
          <li class="eleven"><!--[if lte IE 6]><a class="aeleven" href="#nogo11"><table><tr><td><![endif]-->
           <img src="/UploadPic/2007-4/20074115459834.jpg" alt="" title="" />
          <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
          </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
         </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
       </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
     </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   </ul>
  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div id="cover1"></div>
<div id="cover2"></div>

效果预览：www.gaodaima.com/webdesign/instance/6066.html

设置字体大小，即可让图片全部覆盖文字，预览中并未设置。如果上面的代码不正确。请在效果预览页面打开源文件，直接复制代码。

欢迎大家阅读《变化图片-用图片覆盖文章的CSS代码_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：变化图片-用图片覆盖文章的CSS代码_css

喜欢 (0)赏
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址