<!doctype html> <html> <head> <title>table contenteditable</title> <style type="text/css"> .bg_img { /*相对位置*/ position: relative; width: 625px; height: 352px; } .ms { /*绝对位置*/ position: absolute; background: #a82327; /*透明度*/ opacity: 0.8; /*span标签的大小*/ width: 625px; height: 20px; /*偏移到div上*/ left: 0; /*span标签下移*/ bottom: 0.1px; text-align: center; color: white; /*copy的别人的代码，我没用到，我没深究其意 */ /*filter:alpha(opacity=60);*/ /*-moz-opacity:0.6;*/ } .toumingzi { position: absolute; background: cornflowerblue; /*透明度*/ opacity: 0.8; /*字体居中*/ text-align: center; /*div标签上移*/ top: 60.1px; width: 625px; height: 20px; } </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> document.addEventListener('click',(e)=>{alert(e.clientX+"_"+e.clientY)}); $(this).css("background-image","url(1.png)"); $(this).css("background-size","auto 100%"); </script> </head> <body>
<div class="bg_img"> <!--图片--> <img src="./imgs/123.jpg" height="1052" width="825"/> <!--span标签 半透明背景层--> <span class="ms">span标签</span> <!--div标签 半透明背景层--> <div class="toumingzi">div标签 <div><input id="sn4" name="sn4" type="text" value="div标签"/></div> </div> </div>
</body> </html>
显示效果如下：
