这里有新鲜出炉的精品教程,程序狗速度看过来!
它是一种用来表现 html(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS(层叠样式表) 即 级联样式表 。
使用 CSS 的 Filter 滤镜实现的小效果,鼠标悬停时激活本效果,是一个半透明的图片提示层,本代码演示了核心的实现方法,你可以举一返三,作出更强大的效果来。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- CSS的Filter背景透明提示
- </title>
- <style>
- *{ margin:0; padding:0;} body{ margin:0 auto; font-size:12px;} .model{margin:0
- auto; width:30px;} .model a:hover{ text-decoration:none;} .model a img{
- border:#fff 1px solid;} .model a:hover img{ border:#888 1px dotted;} .model
- a span{ padding:0; display:block; width:80px; height:50px; margin-top:-32px;
- overflow:hidden; line-height:14px; filter: Alpha(opacity=0); opacity:.0;
- cursor:pointer; text-align:center;} .model a:hover span{ color:#fff; background:#000;
- padding:0; display:block; width:84px; height:54px; margin:-36px 0 0 1px!important;
- margin:-36px 0 0 0px; overflow:hidden; line-height:16px; filter: Alpha(opacity=60);
- opacity:.6; text-align:left; text-align:center;} .model2{margin:0 auto;
- width:30px;} .model2 a:hover{ text-decoration:none;} .model2 a img{ border:#fff
- 1px solid;} .model2 a:hover img{ border:#888 1px dotted;} .model2 a span{
- padding:0; display:block; width:180px; height:50px; margin-top:-32px; overflow:hidden;
- line-height:14px; filter: Alpha(opacity=0); opacity:.0; cursor:pointer;
- text-align:center;} .model2 a:hover span{ color:#fff; background:#000;
- padding:0; display:block; width:480px; height:16px; margin:-36px 0 0 1px!important;
- margin:-20px 0 0 0px; overflow:hidden; line-height:16px; filter: Alpha(opacity=60);
- opacity:.6; text-align:left; text-align:center;}
- </style>
- </head>
- <body>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_20/1490192326_3770.jpg"
- border="0" data-src="" />
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0717/286310.html