html 添加遮罩

代码:

  

<style type="text/css">
    .Box{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .Shade{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #333;
        opacity: 0.3;
    }
</style>

<div class="Box">
    <div class="Shade"></div>
    <div>
        <p>被遮罩元素</p>
        <button type="button">OK</button>
        <p>被遮罩元素</p>
    </div>
</div>

 

总结:

  这里主要是 position 的使用技巧,针对该属性在下面做个总结:

    • static 默认情况下元素使用的是该属性值;
    • relative 表明该元素还在自己的文档流中,只是相对于之前自己的位置进行的偏移
    • absolute 表明该元素不在文档流中,是相对于已定位的祖先元素的偏移量;如果族
      先元素没有使用position定位,怎该元素会相对于文档来进行定位
    • fixed 针对浏览器的窗口进行定义

  

 

  

html 添加遮罩

上一篇:js-时间对象常用方法


下一篇:Hbase出现ERROR: org.apache.hadoop.hbase.PleaseHoldException: Master is initializing