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 473
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 362
最后，我们添加蒙层的 CSS 样式，使其覆盖图像并显示居中的“已读”文字。left: 0;/* 半透明黑色蒙层 */z-index: 1;
css 实现蒙版效果
weixin_49609457的博客
03-31 4005
css 实现蒙版效果
前端小案例1：用css实现蒙层效果
qq_43720551的博客
09-03 2124
前端小案例1：用css实现蒙层效果
使用css给页面加上蒙层（类似遮罩层）效果
m0_57005111的博客
08-28 2149
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图片增加白色渐变蒙层
qq_41154522的博客
08-31 2323
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 4065
使用场景: 在做两个元素的连接处的UI适配时，图片的颜色不能保证一定跟背景颜色或者是主色调保持一致时，会显得比较突兀。
【playwright+python】page.screenshot()方法： 给页面元素加上蒙版并截图
Summer1oo86的博客
01-10 525
【代码】【playwright+python】给页面元素加上蒙版并截图。
【CSS3】渐变 阴影 遮罩
weixin_55639808的博客
01-16 1091
水平,垂直偏移量长度单位模糊半径指阴影由完全的颜色到消失的长度，类于似渐变的长度。默认是0阴影大小默认是0，和原来一样大，单位px，正数表示放大，负数表示缩小颜色阴影颜色默认outset外阴影，可以写inset改成内阴影，不遮挡文字遮挡盒子，遮挡背景,可用逗号分隔，类似背景渐变，可叠加。
css实现遮罩层 -- 遮盖整个窗口
莫宛的博客
08-11 1万+
遮盖整个窗口 当页面内存在position为 absolute/ relative/ fixed属性的元素时，想要实现遮盖整个页面，需要三步： 应当将遮罩层元素的position设置为fixed position: fixed; 上侧，左侧距离设置为0 top: 0; left: 0; z-index设置成页面内最大 z-index: 100; 示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta
前端HTML背景蒙板
个人笔记
02-28 742
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 600px; height: 600px; background: url(img/1.png); border: 3px solid gold; /*背景蒙
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值