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