<!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>
显示效果如下：
