局部遮罩

要实现局部遮罩,可以按照如下方法:
.parent {
    width: 100px;
    height: 100px;
    position: relative;
    top: 0;
    left: 0;
}

.coverage {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("image-path") no-repeat center center;
    background-color: gray;
    z-index: 100;
    opacity: 0.3;
    filter: Alpha(Opacity=30);
}

<body>
    <div class="top" style="heigth: 100px;width: 100px;"></div>
    <div class="parent">
        <div class="coverage"></div>
    </div>
</body>


其中,父元素的position: relative;和子元素的position: absolute;最关键。如果没有这两个属性,则子元素设置高度和宽度为100%会有问题。另外,background-color要在background后面。

你可能感兴趣的:(html,css)