`

局部遮罩

    博客分类：
  • CSS
htmlcss 
阅读更多
要实现局部遮罩，可以按照如下方法： 
.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后面。
分享到：
| css 如何控制垂直居中
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics