看截图：给图片罩上一层半透明文字描述效果（二）DIV+CSS+SPAN

最新推荐文章于 2019-08-15 19:12:00 发布
最新推荐文章于 2019-08-15 19:12:00 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： [03]Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chz_cslg/article/details/9824503
版权

        前面一篇例子是基本满足应用，有人会问能不能在调整一下？可能想：那个半透明文字能不能不要跟照片宽度一致，想在外面在套个容器，文字与容器宽度一致，图片在容器中居中显示；于是乎我也想到了这个问题，于是下班后又琢磨了一下，做了一下修改、调整一下，满足两种情况下需要：至于哪两种效果，自己琢磨看代码吧。

先贴效果图：

再贴精髓源码：

<%@ 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;" οnerrοr="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;" οnerrοr="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~

 

奋斗的小壁虎
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
div+css设置div的背景为半透明的方法
09-25
设置div的背景为半透明，下面有个不错示例，使用div+css来实现下，不会的朋友可以参考下
一个简单CSS--图片底部透明描述文字效果
qq_41039734的博客
06-10 966
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello CSS!</title> <style> * { margin: 0; padding: 0; } .out-content { widt...
将图片的说明文字显示在图片之上且背景半透明效果
sdfsdfytre的博客
01-29 615
将图片的说明文字显示在图片之上且背景半透明效果
html通过css来设置半透明背景
热门推荐
jumtre的专栏
03-02 12万+
Html/Css标签透明度效果的实现,在html中，实现半透明背景，在HTML Div+Css编程中，为了实现版透明，通常有3中做法。 第一种是HTML5的透明，在H5中支持透明背景颜色，但遗憾的是，H5中的办透明背景颜色只支持 rgba的写法，不支持16进制的写法 如： background-color:rgba(0,152,50,0.7);// -->70%的不透明度
DIV+CSS 实现背景透明，文字不透明
懒得代码
12-17 1354
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。 而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜.
纯div+css轮播图片切换图片
11-07
纯DIV+CSS做的三种图片滚动，轮播图片 1.2.3.4图片切换 电子相册
比较漂亮的一个导航条的效果DIV+CSS
10-30
比较漂亮的一个导航条的效果DIV+CSS
js+CSS实现弹出居中背景半透明div层的方法
10-24
主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下
DIV+CSS中让布局、背景图片、文字内容居中的方法
09-25
主要为大家介绍了在DIV+CSS布局的页面里，让布局、背景图片、文字内容居中的方法，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的，详情请看下
微信小程序创建透明遮罩
a1057962851的博客
11-17 6631
margin-top: 0%; width:100%; height:100%; position:absolute; background-color:#999; z-index:9999; top:0; left:0; opacity: 0.70;
微信小程序中遮罩层的实现
Syleapn的博客
03-13 3万+
近期在写一点小东西，碰到遮罩层，今天把它总结下来，方便大家共同学习： 有好几种方法，今天先来第一种。 准备工作： 一张图片：close.png 一、方法1 先上效果： 点击“核算”以后，遮罩层出现，同时conts（即面板）出现。再次点击“核算”或conts右上角的关闭按钮时，遮罩层消失，conts隐藏。 源码： wxml代码 <vi...
div+css实现图片底部透明遮罩文字标题
hujinbing的专栏
10-08 7086
div+css实现图片底部透明遮罩文字标题HTML代码 亲，透明遮罩会了吗？ div+css实现图片底部透明遮罩文字标题CSS代码 .class_outer { display: block; width: 546px; height: 276px; margin: 10px auto; position: relative; ove
看截图：给图片罩上一层半透明文字描述效果（一）DIV+CSS+SPAN 借鉴百度图片附着文字效果
Kevin.Chen - 专注前行
08-06 3296
这段时间项目中要用到：在图片展示时，在图片高度的下边一部分罩上一层透明效果，文字描述附着在透明层上。其实这个东西网上到处都是了，网上也没搜到很好、精简的例子；自己写、去琢磨吧，还真需要一点时间；时间宝贵，就拿来主义吧，就到百度图片看了一下，F12开发者工具调出来，然后就这一样一步一步把它给抠出来了。自己整理修改了一下，把精髓抠出，有兴趣的朋友可以直接拿去用了。 先贴效果张图： 精髓源码如下
span标签在IE下的透明设置
wangin1013的专栏
04-11 638
    在使用jquery的fadeOut的时候，发现span标签在IE8下不能慢慢消失，而是一下子消失，很是好奇。jquery官方提供的fadeOut的span操作是可以在IE8下是可以慢慢消失的。    仔细发信息jquery在实现的时候是把代码引入到了iframe中去了，经再现span标签在iframe中使用fadeOut时IE8表现正常，但如果在一个页面上对span进行fadeOut是...
div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器
zhll3377的专栏
11-08 3万+
IE：外层filter，内层position:relative或absolute。 FF：外层不使用opacity，而用background:rgba()。 New Document #wrapper { background: #369; widt
HTML 图片上增加一层 透明层 并写不透明文字以及元素透明效果
tenggeer0789的博客
04-26 2370
<div style="position: relative; " class="demo-carousel"> <img style="width:100%;height:100%"src="../../static/img/bg_1_副本_副本.jpg" alt=""> <span style="position...
关于网页布局中常见的margin: 0px ; padding: 0px; 总结
weixin_30258901的博客
08-15 3112
我们在网页布局中常用到margin: 0px; padding: 0px; 但是在大型的网站布局中通常不这样写通常是按下面这种方式。 ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a { padding: 0px; margin: 0px; } 但是经过本人的逐一验证发现有的标签的初始化marg...
怎么给html底部加个遮罩,div+css实现图片底部透明遮罩文字标题
最新发布
05-21
最后，我们使用CSS3的过渡效果，当鼠标悬停在容器上时，将标题向上移动，露出图片底部的部分，从而实现了透明遮罩效果。 需要注意的是，以上CSS代码中的 `rgba(0, 0, 0, 0.6)` 表示半透明黑色，其中最后一个参数 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奋斗的小壁虎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值