css 幻影灯添加透明提示栏

时间：2014-03-08 11:49:03 阅读：578 评论：0 收藏：0 [点我收藏+]

<!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>
    <title></title>
    <style type="text/css">
        body{ margin:0px; padding:0px;}
    .wrapper
    {
         position:relative; width:700px;height:420px; margin:0 auto; overflow:hidden;
        }
    .sb-slider
    {
         position:absolute; width:700px; list-style:none;overflow:hidden; left:0px; top:0px;margin:0px; padding:0px;
        }
    .sb-slider li
    {
         margin:0px; padding:0px;width:700px; height:420px; position:relative;
        }
        .sb-slider li a{width:700px; height:420px; display:inline-block;}
    .sb-slider li a img{width:700px; height:420px; border:0px;}
    .sb-description
    {
         position:absolute;
         left:20px;
         
         bottom:0px;
         width:650px;
         height:50px;
         z-index:1000;
         background: #CBBFAE;
         background: rgba(190,176,155, 0.4);
         border-left: 4px solid white;
         border-left: 4px solid rgba(255,255,255,0.7);
         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
         filter: alpha(opacity=50);    
         opacity:0.5;
         color: #fff;
         line-height:50px;
    
        -webkit-transition: all 200ms;
        -moz-transition: all 200ms;
        -o-transition: all 200ms;
        -ms-transition: all 200ms;
        transition: all 200ms;
        }
        .sb-description:hover
        {
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter: alpha(opacity=80);    
            background: rgba(190,176,155, 0.8);
            }
    </style>
</head>
<body>

<div class="wrapper">
    <ul class="sb-slider">
        <li>
            <a href=""><img src="images/1.jpg" alt="image1"/></a>
            <div class="sb-description">
                Creative Lifesaver
            </div>
        </li>
        <li>
            <a href="" target="_blank"><img src="images/2.jpg" alt="image2"/></a>
            <div class="sb-description">
                Honest Entertainer
            </div>
        </li>
        <li>
            <a href="" target="_blank"><img src="images/3.jpg" alt="image1"/></a>
            <div class="sb-description">
                Brave Astronaut
            </div>
        </li>
        <li>
            <a href="" target="_blank"><img src="images/4.jpg" alt="image1"/></a>
            <div class="sb-description">
                Affectionate Decision Maker
            </div>
        </li>
        <li>
            <a href="" target="_blank"><img src="images/5.jpg" alt="image1"/></a>
            <div class="sb-description">
                Faithful Investor
            </div>
        </li>
        <li>
            <a href="" target="_blank"><img src="images/6.jpg" alt="image1"/></a>
            <div class="sb-description">
                Groundbreaking Artist

            </div>
        </li>
        <li>
            <a href="" target="_blank"><img src="images/7.jpg" alt="image1"/></a>
            <div class="sb-description">
                Selfless Philantropist
            </div>
        </li>
    </ul>
</div>
</body>
</html>

bubuko.com,布布扣

正常样式：

 position:absolute;
         left:20px;
         bottom:0px;
         width:650px;
         height:50px;
         z-index:1000;
         background: #CBBFAE;
         background: rgba(190,176,155, 0.4);
         border-left: 4px solid white;
         border-left: 4px solid rgba(255,255,255,0.7);
         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
         filter: alpha(opacity=50);    
         opacity:0.5;
         color: #fff;
         line-height:50px;
    
        -webkit-transition: all 200ms;
        -moz-transition: all 200ms;
        -o-transition: all 200ms;
        -ms-transition: all 200ms;
        transition: all 200ms;

鼠标移到上面样式改变：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter: alpha(opacity=80);    
            background: rgba(190,176,155, 0.8);

css 幻影灯添加透明提示栏,布布扣,bubuko.com

css 幻影灯添加透明提示栏

原文：http://www.cnblogs.com/lihaozhou/p/3587330.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)