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

css

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>
        </ul>
       </li>
       </ul>
      </li>
      </ul>
     </li>
     </ul>
    </li>

</ul>
   </li>
   </ul>
  </li>
  </ul>
</li>
</ul>
</li>
</ul>
<div id="cover1"></div>
<div id="cover2"></div>

效果预览：www.alixixi.comhttp://www.alixixi.com/webdesign/instance/6066.html

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索z-index
， width
， px
， height
， left
Opacity
css 覆盖规则、css 样式覆盖、css 覆盖、css 遮罩层覆盖全屏、css覆盖优先级，以便于您获取更多的相关知识。

时间： 2024-11-03 21:38:38

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

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

两行 CSS 代码实现图片任意颜色赋色技术

gui-Java关于JButton上加上图片把文字覆盖的问题

用css来控制图片大小显示的实现方法与代码_经验交流

js 图片随机不定向浮动的实现代码

jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

js实现点击图片将图片地址复制到粘贴板的方法

js-用jquery写了个图片切换效果，想让鼠标悬停图片时候图片停止切换，没有悬停则自动切换

Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

php将图片保存为不同尺寸图片的图片类实例