局部遮罩

最新推荐文章于 2020-12-03 11:04:45 发布

dllyj86

最新推荐文章于 2020-12-03 11:04:45 发布

阅读量207

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/dllyj86/article/details/84390042

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

要实现局部遮罩，可以按照如下方法：


.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后面。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dllyj86

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
局部遮罩

要实现局部遮罩，可以按照如下方法：[code="css"].parent { width: 100px; height: 100px; position: relative; top: 0; left: 0;}.coverage { width: 100%; height: 100%; positi...
复制链接

扫一扫