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 }

效果如下...

未点击时：

 

 

点击时：

posted @ 2019-08-31 15:16  s1eepDumpling  阅读(1605)  评论(0)  编辑  收藏  举报