看截图:给图片罩上一层半透明文字描述效果(二)DIV+CSS+SPAN
2013-08-07 23:08
423 查看
前面一篇例子是基本满足应用,有人会问能不能在调整一下?可能想:那个半透明文字能不能不要跟照片宽度一致,想在外面在套个容器,文字与容器宽度一致,图片在容器中居中显示;于是乎我也想到了这个问题,于是下班后又琢磨了一下,做了一下修改、调整一下,满足两种情况下需要:至于哪两种效果,自己琢磨看代码吧。
先贴效果图:
再贴精髓源码:
----------------------------------------------------------------------------------------------------------------------------------
希望对您有所帮助!
2013年8月7日
Kevin.Chen 苏州.太仓
O(∩_∩)O~
先贴效果图:
再贴精髓源码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %> <!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 runat="server"> <title></title> <style type="text/css"> DIV { border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font: 12px arial, 宋体, sans-serif; vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px; } SPAN { border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font: 12px arial, 宋体, sans-serif; vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px; } A { border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font: 12px arial, 宋体, sans-serif; vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px; } IMG { border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font: 12px arial, 宋体, sans-serif; vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px; } A IMG { border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px; } .slider { position: relative; padding-right: 0px; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; float: right; width: 180px; height: 225px; overflow: hidden; margin: 0px 50px 0px 50px; } .slider .album-cover { position: absolute; float: left; display: block; height: 225px; overflow: hidden; } .slider .album-cover:hover { filter: alpha(opacity= 80); opacity: .8; -moz-opacity: .8; -khtml-opacity: .8; } .slider .album-cover IMG { display: block; } .sliderOuter { position: relative; padding-right: 0px; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; float: right; width: 100%; height: 225px; overflow: hidden; } .sliderOuter .desc { position: absolute; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',EndColorStr='#66000000'); line-height: 32px; width: 100%; display: block; height: 32px; color: #fff; font-size: 16px; left: 0px; bottom: 0px; } .sliderOuter .cover-title { float: left; line-height: 32px; margin-left: 10px; } .sliderOuter .cover-num { float: right; line-height: 32px; margin-right: 10px; } </style> </head> <body> <form id="form1" runat="server"> <div> 第一种:指定列宽让图片居中;背景半透明文字描述跟列宽一致。 <table border="1" cellpadding="0" cellspacing="0"> <tr> <td> <div class="sliderOuter"> <div class="slider"> <a class="album-cover" style="width: 180px; left: 0px;" href="#" target="_blank"> <img src="erping1.jpg" style="width: 100%; height: 225px;" onerror="imgError(this);" /> </a> </div> <span class="desc"><span class="cover-title">动漫集结</span><span class="cover-num">1877张</span></span> </div> </td> <td> <div class="sliderOuter"> <div class="slider"> <a class="album-cover" style="width: 180px; left: 0px;" href="#" target="_blank"> <img src="erping2.jpg" style="width: 100%; height: 225px;" onerror="imgError(this);" /> </a> </div> <span class="desc"><span class="cover-title">家.守候</span><span class="cover-num">99张</span></span> </div> </td> <td> <div class="sliderOuter"> <div class="slider"> <a class="album-cover" style="width: 180px; left: 0px;" href="#" target="_blank"> <img src="erping3.jpg" style="width: 100%; height: 225px;" /> </a> </div> <span class="desc"><span class="cover-title">摄影.艺术</span><span class="cover-num">474张</span></span> </div> </td> <td> <div class="sliderOuter"> <div class="slider"> <a class="album-cover" style="width: 180px; left: 0px;" href="#" target="_blank"> <img src="erping4.jpg" style="width: 100%; height: 225px;" /> </a> </div> <span class="desc"><span class="cover-title">古典美 绝色倾城</span><span class="cover-num">100张</span></span> </div> </td> </tr> </table> <br /> 第二种:表格自适应(100%)外部容器,表格内列宽均分并且让图片居中;背景半透明文字描述跟列宽一致。 <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <div class="sliderOuter"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="width: 50%;"> </td> <td> <div class="slider" style="margin: 0px;"> <a class="album-cover" style="width: 180px; left: 0px;" href="#" target="_blank"> <img src="erping1.jpg" style="width: 100%; height: 225px;" /> </a> </div> </td> <td style="width: 50%;"> </td> </tr> </table> <span class="desc"><span class="cover-title">动漫集结</span><span class="cover-num">1877张</span></span> </div> </td> <td> <div class="sliderOuter"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="width: 50%;"> </td> <td> <div class="slider" style="margin: 0px;"> <a class="album-cover" style="width: 180px; left: 0px;" href="#" target="_blank"> <img src="erping2.jpg" style="width: 100%; height: 225px;" /> </a> </div> </td> <td style="width: 50%;"> </td> </tr> </table> <span class="desc"><span class="cover-title">家.守候</span><span class="cover-num">99张</span></span> </div> </td> <td> <div class="sliderOuter"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="width: 50%;"> </td> <td> <div class="slider" style="margin: 0px;"> <a class="album-cover" style="width: 180px; left: 0px;" href="#" target="_blank"> <img src="erping3.jpg" style="width: 100%; height: 225px;" /> </a> </div> </td> <td style="width: 50%;"> </td> </tr> </table> <span class="desc"><span class="cover-title">摄影.艺术</span><span class="cover-num">474张</span></span> </div> </td> <td> <div class="sliderOuter"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="width: 50%;"> </td> <td> <div class="slider" style="margin: 0px;"> <a class="album-cover" style="width: 180px; left: 0px;" href="#" target="_blank"> <img src="erping4.jpg" style="width: 100%; height: 225px;" /> </a> </div> </td> <td style="width: 50%;"> </td> </tr> </table> <span class="desc"><span class="cover-title">古典美 绝色倾城</span><span class="cover-num">100张</span></span> </div> </td> </tr> </table> </div> </form> </body> </html>
----------------------------------------------------------------------------------------------------------------------------------
希望对您有所帮助!
2013年8月7日
Kevin.Chen 苏州.太仓
O(∩_∩)O~
相关文章推荐
- 看截图:给图片罩上一层半透明文字描述效果(一)DIV+CSS+SPAN 借鉴百度图片附着文字效果
- CSS基础知识二(段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接)
- div+css布局控制div定位浮动层在背景图片上的半透明阴影效果
- li中的图片和文字不对齐div+css,解决方法
- css实现图片上漂浮着文字效果
- css图片上漂浮着文字效果
- DIV+JS+CSS实现点击弹出图片效果
- CSS实现鼠标放图片上显示白色边框+文字描述
- CSS实现文字环绕图片效果
- CSS文字图片div元素居中方法之水平居中
- li中的图片和文字不对齐div+css,解决方法
- 鼠标移上图片放大弹出文字半透明图层效果
- css图片上漂浮着文字效果
- CSS让文字半透明显示在图片上
- css实现图片选中效果,选中后在图片上有内框和文字介绍
- js+div实现文字滚动和图片切换效果代码
- 图片与文字半透明效果 鼠标移上不透明
- DIV+CSS中让布局居中_背景图片居中_文字内容居中
- CSS实现文字环绕图片效果
- css阴影效果+文字溢出时省略号表示+图片切割