看截图：给图片罩上一层半透明文字描述效果（一）DIV+CSS+SPAN 借鉴百度图片附着文字效果

最新推荐文章于 2021-11-18 11:15:07 发布

奋斗的小壁虎

最新推荐文章于 2021-11-18 11:15:07 发布

阅读量3.3k

点赞数

分类专栏： [03]Web前端

本文链接：https://blog.csdn.net/chz_cslg/article/details/9775571

版权

[03]Web前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

这段时间项目中要用到：在图片展示时，在图片高度的下边一部分罩上一层透明效果，文字描述附着在透明层上。其实这个东西网上到处都是了，网上也没搜到很好、精简的例子；自己写、去琢磨吧，还真需要一点时间；时间宝贵，就拿来主义吧，就到百度图片看了一下，F12开发者工具调出来，然后就这一样一步一步把它给抠出来了。自己整理修改了一下，把精髓抠出，有兴趣的朋友可以直接拿去用了。

先贴效果张图：

精髓源码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!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-bottom: 0px;
            padding-left: 0px;
            width: 730px;
            padding-right: 0px;
            float: left;
            height: 225px;
            overflow: hidden;
            padding-top: 0px;
        }
        .slider .content
        {
            float: left;
            height: 225px;
            overflow: hidden;
        }
        .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;
        }
        .slider .album-cover .desc
        {
            position: absolute;
            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',EndColorStr='#66000000');
            line-height: 32px;
            width: 100%;
            bottom: 0px;
            display: block;
            height: 32px;
            color: #fff;
            font-size: 16px;
            left: 0px;
        }
        .slider .cover-title
        {
            float: left;            
            line-height: 32px;
            margin-left: 10px;
        }
        .slider .cover-num
        {
            float: right;            
            line-height: 32px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="slider">
            <div class="content">
                <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);" />
                    <span class="desc"><span class="cover-title">动漫集结</span><span class="cover-num">1877张</span></span></a>
            </div>
            <div class="content">
                <a class="album-cover" style="width: 180px; left: 183px;" href="#" target="_blank">
                    <img src="erping2.jpg" style="width: 100%; height: 225px;" οnerrοr="imgError(this);" />
                    <span class="desc"><span class="cover-title">家.守候</span><span class="cover-num">99张</span></span></a>
            </div>
            <div class="content">
                <a class="album-cover" style="width: 180px; left: 366px;" href="#" target="_blank">
                    <img src="erping3.jpg" style="width: 100%; height: 225px;" οnerrοr="imgError(this);" />
                    <span class="desc"><span class="cover-title">摄影.艺术</span><span class="cover-num">474张</span></span></a>
            </div>
            <div class="content">
                <a class="album-cover" style="width: 180px; left: 549px;" href="#" target="_blank">
                    <img src="erping4.jpg" style="width: 100%; height: 225px;" οnerrοr="imgError(this);" />
                    <span class="desc"><span class="cover-title">古典美 绝色倾城</span><span class="cover-num">100张</span></span></a>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------

希望对您有所帮助！

2013年8月6日

Kevin.Chen 苏州.太仓

O(∩_∩)O~