`

局部遮罩

    博客分类：
  • 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 如何控制垂直居中
评论
发表评论

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

相关推荐

    Flex仿Extjs局部遮罩（可带进度条）

    自己整理的的一个仿Extjs局部遮罩，可带进度条。只是一个思路，组件有些小问题，比如组件大小改变时，遮罩没有随着组件大小变。大家使用时候可以优化了下。

    实现局部遮罩与关闭原理及代码

    局部遮罩在网页设计中是一种常见的交互效果，它可以在特定元素上添加一个半透明覆盖层，以达到突出显示某个区域或者阻止用户与背景交互的目的。这种效果通常用于弹窗、模态对话框或滚动锁定等场景。本文将详细解释...

    全屏loading图有遮罩效果 当显示全屏loading图时无法操作页面上的按钮

    在实际应用中，全屏和局部遮罩提示可以结合动画效果和自定义图标，如旋转的加载图标，以增加视觉吸引力并提供更友好的用户体验。对于移动端应用，这些加载提示也至关重要，因为较小的屏幕尺寸和触摸操作更容易导致误...

    jquery实现遮罩效果.rar

    在本教程中，我们将探讨如何利用 jQuery 实现全屏或局部遮罩效果，并让遮罩在设定的时间后自动关闭。这个功能在很多场景下都非常实用，比如加载提示、弹窗确认或页面过渡时，可以提供良好的用户体验。 首先，我们...

    遮罩弹出框

    遮罩弹出框是网页设计中的一个重要元素，它通常用于显示重要的信息、提示、警告或者进行用户交互。这种设计模式可以有效地吸引用户的注意力，并在不影响主页面内容的情况下提供额外的操作选项。本文将深入探讨遮罩弹...

    遮罩动画原理以及实例

    2. **局部遮罩**：利用遮罩层遮住某一元件的一部分，以实现特殊效果。 #### 二、遮罩层的概念 遮罩层是一个特殊的图层，在Flash中，它可以被用来控制其他图层（即被遮罩层）中某些部分的可见性。简单来说，遮罩层...

    利用Jquery几行代码实现遮罩层

    在Web开发中，遮罩层（Mask Layer）是一种常见的用户界面元素，用于在页面上创建一个半透明或全透明的覆盖层，以突出显示特定内容或执行某些操作时阻止用户与背景交互。Jquery是一个强大的JavaScript库，它简化了DOM...

    基于jquery的BlockUI做的遮罩层

    在网页开发中，有时我们需要创建一个遮罩层或者弹出框来提示用户或者阻止用户与页面其他部分的交互，这就是“基于jQuery的BlockUI”插件所做的事情。BlockUI是一款非常实用的jQuery插件，它能够方便地实现页面区域的...

    ifocuzon 屏幕遮罩

    2. **多种模式**：软件可能提供不同类型的遮罩模式，例如全屏遮罩、局部遮罩等，以适应不同类型的屏幕布局和应用需求。 3. **易于操作**：界面应设计得简单易用，用户可以快速开启和关闭遮罩，以适应频繁切换任务的...

    asp.net 遮罩层 asp.net 遮罩层

    通过这些步骤和解决方案，可以有效地解决ASP.NET应用中的遮罩层问题，实现全屏或局部的遮罩效果。在实际开发中，还可以根据需求添加动画效果、调整透明度、自定义关闭按钮等功能，以满足不同场景的应用。

    棒片磨皮全功能绿色免费版--影楼用的专业工具

    该软件的“全功能”体现在它不仅限于磨皮，还包含了亮度调整、色彩平衡、对比度增强、局部遮罩等多重图像处理功能。例如，通过亮度调整，可以优化照片的整体明暗效果，使画面更加均衡；色彩平衡则可以纠正拍摄时因...

    html5 手机通过文字遮罩动画

    其中，"文字遮罩动画"是一种常见的视觉效果，它能够以动态的方式展示文本，增强用户界面的互动性和吸引力。在HTML5中，实现这种效果通常涉及到CSS3和JavaScript的结合使用。 CSS3是CSS的最新版本，它引入了许多新的...

    Unity UI Soft Mask - 实现Sprite精灵遮罩

    这个功能对于创建如UI弹窗、渐变过渡或局部模糊等视觉效果非常有用。通过软遮罩，你可以使特定区域的内容逐渐淡出，而不是简单地切断，这增加了游戏或应用的用户体验。 资源非插件，意味着它是Unity原生支持的一...

    js图片遮罩效果实现

    在网页设计中，图片遮罩效果是一种常见的交互设计手法，它可以增强用户体验，特别是当需要突出显示图片的某个局部时。本文将深入探讨如何使用JavaScript来实现这种效果，并结合实例进行详细解析。 首先，我们需要...

    VR电影手册｜After Effects 360°后期插件汇总.pdf

    用户可以轻松添加局部遮罩和后期特效、进行视角旋转、颜色校正、或着 360°镜头模糊和渲染感兴趣的区域。 Revolve 360 Revolve 360 是一种功能强大的插件，尽管操作面板简单，但可以控制相机的视角，完成一些 CG ...

    绚烂彩点笔刷，绚烂彩点PS笔刷下载.zip

    此外，结合Photoshop的混合模式和图层蒙版功能，可以进一步探索出更多效果，如叠加色彩、透明度变化或是局部遮罩，让作品层次更丰富，视觉效果更加独特。 总的来说，“绚烂彩点笔刷”是Adobe Photoshop中的一个重要...

    2021-2022年收藏的精品资料三力家具品牌策划.doc

    4. 广告制作技巧：广告画面采用不同的镜头景别和拍摄方式，如远景、特写、平摇等，通过调色和后期工艺强化视觉效果，如藏绿色调色和局部遮罩，以增强家具的质感。同时，音乐和配音的选择也是营造氛围和情感感染的...

    Unity中UI和粒子特效之间的遮挡以及遮罩功能

    这在实现粒子特效局部显示或根据特定形状动态遮挡时非常有用。 5. **UI Layer Mask**：除了粒子系统的遮罩，Unity还允许为整个UI层级设置遮罩，这样粒子特效可以通过设置遮罩层来影响所有UI元素。 在...

    Unity UGUI教程.rar

    8. **Mask系统**：学习如何使用Mask组件来隐藏或显示特定区域的UI元素，实现局部遮罩效果。 9. **特效与动画**：讲解如何通过Animator和Timeline创建UI动画，以及使用Visual Effect Graph创建粒子特效。 10. **UI...

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