5、透明度渐变 - HTML5&CSS3.0基础部分-xyphf1.#div1:hover{background:rgb

1.rgba 鼠标移上透明度变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1{width:200px;height:200px;background:red;transition:1s all ease;
border:10px solid green;}
#div1:hover{background:rgba(255,0,0,0.3);
            border-color: rgba(39,109,39,0.3);
}

</style>
</head>
<body>
    <div id="div1"><span>徐玉朋</span></div>
</body>
</html>

1.鼠标以上显示提示词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1{ position:relative;width:300px; height:200px; overflow:hidden; margin:100px auto;}
#div1 img{width:100%; height:100%;}

#div2{ position:absolute;left:0;bottom:-81px; width:100%; height:80px; background:#000; border-top:1px solid #fff; color:#fff;
    transition:0.7s all ease;
}
#div1:hover #div2{bottom:0; background:rgba(0,0,0,0.3);}

</style>
</head>
<body>
    <div id="div1">
        <img src="f.jpg" alt="">
        <div id="div2">3D picture ring   一个js+html5的小效果</div>
    </div>
</body>
</html>