位置: IT常识 - 正文

CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter(css实现背景图片变透明)

编辑:rootadmin
CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter

推荐整理分享CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter(css实现背景图片变透明),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css背景图像设置,css实现背景图片变透明,css 背景图,css实现背景图片透明,css实现背景图片旋转,css实现背景图片透明,css实现背景图片变透明,css实现背景图片旋转,内容如对您有帮助,希望把文章链接给更多的朋友!

💭💭

✨: CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter   💟:东非不开森的主页   💜: 因为很多东西来不及去做去看可是时间很快总是赶不上,所以要去成长呀💜💜   🌸: 如有错误或不足之处,希望可以指正,非常感谢😉  

应用场景:在音乐类的项目,会有让图片当背景模糊的效果 如下图:

毛玻璃效果一、使用filter: blur()二、backdrop-filter: blur()补充:filter、backdrop✨✨一、使用filter: blur()

⭐⭐⭐

filter: blur(),把图片变模糊的同时,四周也会模糊,没有边界,就不好看哈哈

给它一个父级元素,父元素控制宽高,超出部分隐藏

css

.bg { position: fixed; width: 450px; height: 253px; overflow: hidden; } .bg-image { width: 100%; filter: blur(5px); } .bg-image::after { content: ""; display: block; background: rgba(0, 0, 0, 0.5); z-index: 1; }

html :

<div class="bg"> <img src="./images/动漫.jpg" alt="" class="bg-image" /> </div>

  预览效果:

虽然四周是清晰了,但是还是会看见白色的边边。

二、backdrop-filter: blur()CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter(css实现背景图片变透明)

⭐⭐⭐⭐⭐   原本图片,想要毛玻璃效果,给它加滤镜(注意,并不是图片模糊化,是给它加滤镜)

背景固定,背景的宽高要和图片一致在添加另外一个元素(即为滤镜),给它设透明度和模糊值给背景和滤镜设置z-index:-1, 使用负值降低优先级,防止添加在模糊图片上的文字图片模糊

  代码: css:

.bg-image, .inner { position: fixed; top: 0; left: 0; width: 450px; height: 253px; z-index: -1; } .inner { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); }

html:

<div class="bg-image"> <img src="./images/动漫.jpg" alt="" class="img" width="100%" /> <div class="inner"></div></div>

  预览效果: 这样就是我们要的效果了,nice~

补充:filter、backdrop✨✨

✨✨

推荐去mdn官网看哦: MDN

filter

mdn文档这样介绍: CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

blur filter: blur() 单位是px 越大越模糊

opacity filter: opacity() 透明度,设置元素的透明度在0~1之间 0:完全透明 1:无效

grayscale filter: grayscale() 使图片变灰

blablabla~~ 和我我下面总结的属性都是一致的(太累了,不想打了,用到啥就去搜吧嘿嘿)

  2. backdrop-filter   mdn文档这样介绍: backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

也就是说给图片加了一层滤镜(我是这样理解的) 常见属性:

backdrop-filter: blur(); 高斯模糊滤镜backdrop-filter: brightness(); 图片明亮度滤镜backdrop-filter: contrast(); 对比度滤镜backdrop-filter: drop-shadow();阴影滤镜backdrop-filter: grayscale();灰度滤镜backdrop-filter: hue-rotate();色相滤镜backdrop-filter: invert();反转滤镜backdrop-filter: opacity();透明度滤镜backdrop-filter: sepia();深褐色滤镜backdrop-filter: saturate();饱和度滤镜

  示例: 括号里面为他们所用的值和单位

backdrop-filter: blur(2px);backdrop-filter: brightness(60%);backdrop-filter: contrast(40%);backdrop-filter: drop-shadow(4px 4px 10px blue);backdrop-filter: grayscale(30%);backdrop-filter: hue-rotate(120deg);backdrop-filter: invert(70%);backdrop-filter: opacity(20%);backdrop-filter: sepia(90%);backdrop-filter: saturate(80%);

(~ ̄▽ ̄)~

本文链接地址:https://www.jiuchutong.com/zhishi/297822.html 转载请保留说明!

上一篇:React+Mobx|基本使用、模块化(react moment)

下一篇:尚融宝25-投资列表展示以及实现充值功能(尚融资本)

  • 能效等级是什么意思(能效等级)(能效级别高好还是低好)

    能效等级是什么意思(能效等级)(能效级别高好还是低好)

  • 微信表情刷屏被限制多久(微信表情刷屏被限制是什么情况)

    微信表情刷屏被限制多久(微信表情刷屏被限制是什么情况)

  • 华为手机搜索不到5gwifi(华为手机搜索不到wifi)

    华为手机搜索不到5gwifi(华为手机搜索不到wifi)

  • 怎样恢复qq达人天数(怎么弄回qq达人)

    怎样恢复qq达人天数(怎么弄回qq达人)

  • 抖音一个小时用多少流量(抖音秒开)

    抖音一个小时用多少流量(抖音秒开)

  • 拼多多保证金交多少合适(拼多多保证金交了有什么好处)

    拼多多保证金交多少合适(拼多多保证金交了有什么好处)

  • vivo出到x几了(vivo手机出到什么型号了)

    vivo出到x几了(vivo手机出到什么型号了)

  • 为什么抖音不显示在线(为什么抖音不显示IP地址)

    为什么抖音不显示在线(为什么抖音不显示IP地址)

  • maxell是什么牌子电池(maxell是什么牌子磁带)

    maxell是什么牌子电池(maxell是什么牌子磁带)

  • 微信语音会过期吗(微信里的语音怎么转发)

    微信语音会过期吗(微信里的语音怎么转发)

  • 微信删除后重新下载聊天记录能恢复吗(微信删除后重新加回来对方知道吗)

    微信删除后重新下载聊天记录能恢复吗(微信删除后重新加回来对方知道吗)

  • 抖音发布作品间隔多长时间(抖音发布作品间距怎么调)

    抖音发布作品间隔多长时间(抖音发布作品间距怎么调)

  • vivo modemlog什么意思(手机modemlog什么意思)

    vivo modemlog什么意思(手机modemlog什么意思)

  • 用户不可及呼叫转移是什么意思(用户不可及呼叫转移8612599)

    用户不可及呼叫转移是什么意思(用户不可及呼叫转移8612599)

  • word如何调节下划线长度(word怎么调下沉)

    word如何调节下划线长度(word怎么调下沉)

  • 和我信领流量叫什么(和我信10g流量怎么领)

    和我信领流量叫什么(和我信10g流量怎么领)

  • 华为分辨率怎么调清晰(华为分辨率怎么调整不了笔记本)

    华为分辨率怎么调清晰(华为分辨率怎么调整不了笔记本)

  • 小红书被限流多久恢复(小红书被限流多久)

    小红书被限流多久恢复(小红书被限流多久)

  • 怎样判断手机有没有nfc(怎样判断手机有木马)

    怎样判断手机有没有nfc(怎样判断手机有木马)

  • 街电充电宝丢了怎么办(街电充电宝丢了赔多少钱)

    街电充电宝丢了怎么办(街电充电宝丢了赔多少钱)

  • 怎么让港版x支持电信(港版怎么用支付宝支付)

    怎么让港版x支持电信(港版怎么用支付宝支付)

  • Novel-Ai本地部署教程(novelai本地部署电脑要求)

    Novel-Ai本地部署教程(novelai本地部署电脑要求)

  • mysql插入意向锁的使用(mysql如何上锁)

    mysql插入意向锁的使用(mysql如何上锁)

  • 帝国CMS二次开发基本问题有哪些(帝国cms源码)

    帝国CMS二次开发基本问题有哪些(帝国cms源码)

  • 偷税与漏税的界限是
  • 印花税票是什么税种
  • 工商年报多久能显示
  • 债券的利益
  • 一般纳税人开普票和专票有什么区别
  • 硬盘录像机开发板
  • 上个月结余应该做到这个月收入里面吗
  • 实收资本一直挂着其他应收款怎么办
  • 社保税款所属期限什么意思
  • 公允价值模式下,投资性房地产不计提折旧或摊销
  • 个体工商户增值税申报操作流程
  • 商场扣点收入如何纳税
  • 支付利息的诉讼请求
  • 分配的股息 要交所得税吗
  • 预付货款工程完工后如何结转?
  • 贸易公司退税怎么做账
  • 工会经费滞纳金是多少
  • 小规模纳税人未申报怎么处理
  • 房产税的征收对象有哪些
  • 工程施工开具发票
  • 增值税税控系统专用设备
  • 企业汇算清缴前的票可以入账吗
  • 印花税资金账簿减免税优惠政策2021
  • 企业的其他业务是什么
  • 基建项目税率
  • 增值税预缴税款表
  • 托收凭证的会计科目
  • 1697509557
  • 其他收益科目核算
  • 印花税的征收项目
  • 小规模纳税人增值税免税政策
  • php表单系统源码
  • 当月费用下月付款怎么做账
  • 总结linux命令行的主要用法
  • 员工福利费账务处理
  • hiddenalbum是什么文件夹
  • 事业单位会计专业知识考什么
  • 外商投资企业需要备案吗
  • vue项目部署到服务器上,页面空白
  • php实现分页查询
  • 收购企业如何看报表
  • 待核销基建支出与待摊投资的区别
  • 公司与公司往来账表格怎么制作
  • 上个月没扣社保 这个月一起交能报账吗
  • sql server如何操作
  • 不能防止sql注入
  • linux环境中使用哪些搜索命令比find更高效
  • 残保金是计入管理费用还是?
  • 简易征收的税款可以抵减
  • 商铺固定设施指哪些
  • 汽车销售和租赁业务描述
  • 运输公司汽车折旧能直接进主营成本吗
  • 投资收益算在营业利润里面吗
  • 主营业务收入增加计入借方还是贷方
  • 电影赠票怎么用
  • 固定资产转为投资性房地产的账务处理公允价值
  • 增值税发票红冲和作废的区别
  • 汇算清缴可以调整主营业务成本吗
  • 小型便利店靠什么进行营利
  • 发票开错了记账凭证如何做?
  • 用于职工福利的增值税怎么计算
  • 服务企业会计建账流程
  • 电脑提示Windows照片查看器无法打开此图片
  • 苹果电脑注释
  • WIN+VMWARE6.5上面网络配置centOs(5.4版) ADSL接入的小结
  • avgserv9.exe是什么进程 avgserv9进程的详细介绍
  • 苹果mac安装win10系统
  • windows7如何开启游戏模式
  • win7能打lol
  • shader开发实战
  • Lesson01_05 HTML中的超链接
  • 使用jquery的步骤
  • 备份多个数据库
  • Unity3D Vuforia Android 相机调焦
  • jquery打开文件对话框
  • 浅谈插入排序算法在Python程序中的实现及简单改进
  • javascript巧用eval函数组装表单输入项为json对象的方法
  • jquery的插件
  • 税控盘开票怎么添加新商品
  • 青岛工商全程电子化
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设