在开发页面UI有这么一个要求,要对图片有一个遮盖的效果,表示活动已经结束,
自己根据这个要求写了一个demo,仅供学习参考
例子:子div实现透明效果遮盖父div
<script> $(function(){ console.log($(".parent").height()); console.log($(".parent").width()); $(".son").height($(".parent").height()); $(".son").width($(".parent").width()); }); </script> <style> .parent{ width: 500px; border: 1px solid green; position: relative; } .son{ background-color:#808080; position:absolute; left:0px; top:0px; filter:Alpha(Opacity=30); /* IE */ -moz-opacity:0.4; /* Moz + FF */ opacity: 0.4; } .test{ background-color:blue; width: 500px; height: 200px; } </style> <div class="parent"> dsajlkfjdkl <br> dsaf <div class="son" style="display:block"></div> </div>