您当前的位置:首页 > CSS鼠标经过图片变亮,移开变变暗效果代码网站首页日记


正文阅读

CSS鼠标经过图片变亮,移开变变暗效果代码

发布时间:2015-7-14 13:52 Tuesday编辑:菲娜丝

    HTML中代码:


          <div class="img"> <a target="_blank" rel="nofollow" href="[field:typeurl/]"><img src="[field:litpic/]" width="306" height="212" alt="" title="">
            <p class="p3">[field:title/]</p>
            </a>
            <div class="imgbg"></div>
          </div>

    CSS中代码:



    .items .box .img {
     width: 306px;
     height: 212px;
     position: relative;
     display: block;
    }
    .items .box .img a img {
     width: 306px;
     height: 212px;
    }
    .items .box .img a .p3 {
     background: #9ac92b;
    }
    .items .box .img a p {
     filter: alpha(opacity=90);
     -moz-opacity: 0.9;
     opacity: 0.9;
     display: block;
    }
    .items .box .img p {
     height: 40px;
     width: 306px;
     color: #fff;
     line-height: 40px;
     text-align: center;
     overflow: hidden;
     position: absolute;
     z-index: 1;
     left: 0;
     bottom: 0;
     display: block;
     font-size: 18px;
    }
    .items .box .img .imgbg {
     width: 306px;
     height: 212px;
     top: 0;
     left: 0;
     position: absolute;
     background: #fefdfd;
     opacity: 0;
     filter: alpha(opacity=0);
    }
    .items .box .img .imgbg:hover {
     opacity: 0.3;
     filter: alpha(opacity=50);
    }


    其中w3c标准透明度就是opacity,filter只有IE才能用,其他浏览器都支持opacity。


关键字词

发表评论:

您也可以直接填写QQ到下面的输入框中,点击获取用户资料实现自动调用您的QQ资料