css图片覆盖文字 点击显示文字


尝试了一下css中图片覆盖文字,起到隐藏的效果,点击图片后文字显示

 

随手拖个图片

.html代码如下:

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta chatset="utf-8">
 5 <title>css</title>
 6 
 7 <style type="个人简历/css"></style>
 8 <link rel="stylesheet" type="text/css" href="new1.css" />
 9 
10 </head>
11 <body>
12 
13 <p class="fix_in_lefttop" style="color: #aaa;
14                                  border: 1px black solid;
15                                  text-align: center;
16                                  width: 50px;" >
17     haha
18     haha            
19 </p>
20         
21     <div class="fix_in_lefttop">
22         <img class="heihei" src="图片2.jpg" alt="图片2" height="100">
23             
24     </div>
25 
26 
27 </body>
28 </html>

 

.css代码如下:

 1 .fix_in_lefttop
 2 {
 3     position: fixed;
 4     top: 35px;
 5     left: 25px;
 6     overflow: hidden;
 7 }
 8 
 9 img.heihei:active 
10 {
11     opacity: 0;
12 }

效果如下...

未点击时:

 

 

点击时:


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM