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 }
效果如下...
未点击时:
点击时: