css - 给页面加渐变式蒙层效果

最新推荐文章于 2024-06-05 16:49:26 发布
最新推荐文章于 2024-06-05 16:49:26 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiaoFengJi/article/details/124795098
版权

  近期做了一个项目，需要根据ui图在内容和展开之间做一个渐变式蒙层效果，然后根据同事提醒发现css3里面的filter滤镜可以做到这个效果。

一、效果图

在这里插入图片描述

二、实现过程

  需要先将一个白色部分定位到需要做蒙层的地方，然后再对这块做蒙层效果。代码如下：
在这里插入图片描述

紫菀檀ss
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5蒙层效果
01-06
html5蒙层效果，可以在效果才层内编辑所需要的内容
tailwindcss-border-gradients:Tailwind CSS插件生成边框图像渐变实用程序
05-12
安装npm install tailwindcss-border-gradients使用简单{ theme : { colors : { 'red' : '#f00' , 'blue' : '#00f' , } , linearBorderGradients : theme => ( { colors : theme ( 'colors' ) , } ) , } , plugins :...
css 好看的蒙版 配色,CSS蒙版中带有渐变的花式角
weixin_36210904的博客
08-03 471
css:root {font-size: 14px;}BODY {min-height: 100vh;display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;flex-wrap: wrap;bac...
蒙层（css）
最新发布
ping
06-05 357
最后，我们添加蒙层的 CSS 样式，使其覆盖图像并显示居中的“已读”文字。left: 0;/* 半透明黑色蒙层 */z-index: 1;
css 实现蒙版效果
weixin_49609457的博客
03-31 4004
css 实现蒙版效果
前端小案例1：用css实现蒙层效果
qq_43720551的博客
09-03 2123
前端小案例1：用css实现蒙层效果
使用css给页面加上蒙层（类似遮罩层）效果
m0_57005111的博客
08-28 2147
vue前端加蒙层
CSS（CSS3）实现整个页面的遮罩层示例
hnyanzijun1的博客
07-16 5050
CSS实现遮罩层遮盖整个窗口 当页面内存在position为absolute/relative/fixed属性的元素时，想要实现遮盖整个页面，需要三步： 第一步： 应当将遮罩层元素的position设置为fixed position: fixed; 第二步： 上侧和左侧距离都设置为0：top: 0; left: 0; 第三步： 把z-index设置成页面内最大，比如 z-index: 200; 完整示例代码如下 <!DOCTYPE html> <html lang="en"> &lt
CSS3 background-image颜色渐变的实现代码
09-22
主要介绍了CSS3 background-image颜色渐变的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
tailwindcss-gradients:Tailwind CSS插件可生成渐变背景实​​用程序
05-02
黑人的命也是命意识到。...安装npm install tailwindcss-gradients用法简单的{ theme : { colors : { 'red' : '#f00' , 'blue' : '#00f' , } , linearGradientColors : theme => theme ( 'colors' ) , rad
css-gradient-generator:CSS渐变生成器
04-27
"css-gradient-generator"是一个专门用于创建CSS渐变的工具，它支持各种浏览器，包括那些可能对特定CSS语法有不同要求的老版本浏览器。 **渐变类型** 1. **线性渐变（Linear Gradient）**：线性渐变沿着一个方向...
css3实现背景动态渐变效果
11-21
在CSS3中，实现背景动态渐变效果是一个非常有趣且实用的特性，它能为网页设计增添更多视觉吸引力。在本篇文章中，我们将探讨如何利用CSS3的`linear-gradient()`函数来创建背景颜色的渐变效果，并通过`@keyframes`...
CSS滤镜实现的颜色渐变翻转效果
09-25
在本文中，我们将深入探讨如何使用CSS滤镜实现颜色渐变翻转效果。CSS滤镜是一种强大的工具，它可以改变元素的视觉表现，包括颜色、对比度、模糊度等。在本例中，我们将重点讨论`transform`和`transition`属性，这两...
深入剖析CSS中的线性渐变linear-gradient
09-24
在CSS3之前，渐变通常依赖于图像设计软件，这种方法不仅可扩展性差，而且会影响页面加载速度。CSS3引入的线性渐变解决了这些问题，使得动态和交互式的网页设计变得更加简单。 **定义线性渐变** 线性渐变由两部分...
tailwindcss-border-gradient-radius:用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序一起使用
05-29
npm install tailwindcss-border-gradient-radius yarn add tailwindcss-border-gradient-radius 用法 简单的 { theme : { linearBorderGradients : theme => ( { colors : theme ( 'colors' ) , background :...
CSS3下的渐变文字效果实现示例
09-24
在CSS3中，我们可以利用一些新的特性为文字添加丰富的视觉效果，其中渐变文字效果就是一种非常吸引人的设计。本文将详细讲解如何通过两种方法在CSS3下实现渐变文字效果。 首先，我们来看第一种方法，利用`mask-...
css图片增加白色渐变蒙层
qq_41154522的博客
08-31 2321
css图片增加白色渐变蒙层。
CSS好看的背景颜色样式（持续更新）
热门推荐
Java小白的打怪升级之路
06-21 1万+
1 红色 #D24D57 2 绿色 #26A65B 3 橙色 #EB7347 4 黑色 #2C3E50 5 暗绿色 #84AF9B 6 橙红色 #FC9D99 7 草绿色 #AEDD81 8 蓝色 #00CCFF 9 灰色 #D0D0D0 10 渐变 代码： background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%); background-image: linear-gradient(-90deg, #29
css添加背景图片渐变透明
qq_45333148的博客
08-11 4059
使用场景: 在做两个元素的连接处的UI适配时，图片的颜色不能保证一定跟背景颜色或者是主色调保持一致时，会显得比较突兀。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值