子div 遮盖 父div

    xiaoxiao2023-03-24  1

    在开发页面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>

     

     

    转载请注明原文地址: https://ju.6miu.com/read-1200176.html
    最新回复(0)