zoukankan      html  css  js  c++  java
  • CSS中对图片的过度

    1:鼠标hover时:出现文字并且图片的背景变暗:
    html:
    <div class="图片" alt='<input type="text">图片显示的文字'>
    <img src="12.jpg" />

    </div>
    CSS:
    .tupian {背景图片大小
    380px;
    height: 266px;
    position: relative;相对背景图片的定位

    }
    upian:before{
    content: attr(alt);出现的文字
    380px;定义hover时的出现灰色的框,和背景图片一样的尺寸
    height:266px;
    /*background: red;*/
    background: rgba(139, 139, 140, 0.8);灰色的图片的透明度
    position: absolute;给灰色的图片的透明度定位到图片上面去
    left:43px;
    top:0px;
    text-align:center;垂直居中
    line-height: 280px;图片上文字的居中
    opacity: 0;最开始不显示
    }
    .tupian:hover:before{hover时出现的效果
    transition:opacity 2s;
    opacity: 1;显示
    color: #373d41;显示文字的颜色
    font-size: 28px;显示文字的大小
    }


    2:鼠标hover时:背景图片变清晰:
    html:

    <div class="huian"></div>灰色框的区块
    <img src="../images/TB1GwwiOXXXXXaVapXXXXXXXXXX-240-108.jpg" alt=""/>
    </div>
    CSS:
    .huian{注:这个区块一定要设在图片的上面
    239px;灰色区块的大小和背景图片一样尺寸呢
    height: 108px;
    background: rgba(243,243,244,.6);透明度
    position: absolute;灰色图片的位置,相对背景图片的定位
    top:49px;
    left: 5px;
    /*background:red;*/
    opacity: 1;显示

    /*z-index: 1;*/
    }
    .huian:hover{
    opacity: 0;不显示
    transition: all 2s;慢慢退出去的时间
    /*transition:background 0.9s ease;*/
    background: rgb(255, 255, 255);
    }

  • 相关阅读:
    JAVA流和File类
    JAVA的Socket
    JAVA反射
    JAVA线程
    JAVA集合
    052-214(新增70题2018)
    052-213(新增70题2018)
    052-212(新增70题2018)
    052-211(新增70题2018)
    052-210(新增70题2018)
  • 原文地址:https://www.cnblogs.com/wangliko/p/8098656.html
Copyright © 2011-2022 走看看