位置: 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-投资列表展示以及实现充值功能(尚融资本)

  • 原材料退款的会计分录
  • 外出经营是什么意思
  • 车辆购置税怎么交网上缴费
  • 来料加工账务处理举例
  • 股东投入款
  • 出口货物退货需要退税吗
  • 高铁票抵扣税率怎么计算
  • 未开业零升报企业是否做年度汇算清缴申报
  • 车间领用材料应填制什么凭证
  • 房地产对居民生活的影响
  • 政府投资计入什么科目
  • 社保扣款不成功会短信提醒吗
  • 小规模文化交流活动
  • 设立独立核算的销售机构
  • 公司拍卖车牌
  • 利润表没有其他业务利润
  • 增值税专用发票抵扣期限
  • 差额征税做账分录
  • 纳税人可以是自然人吗
  • 安装服务需要预缴税款吗
  • 劳务费发票证明怎么写
  • 如何在vue项目中导入外部的包
  • 电子发票如何作废冲红
  • win7系统中怎样没有智能卡这一选项
  • 暂存款账务处理
  • 电脑故障检测与维护方法
  • php curd
  • 借支单还款后借支单要还么
  • 辅助生产成本的分配
  • php二维数组查询指定值
  • 科技推广和应用服务业行业
  • c语言设计酒店管理系统
  • 一个惊艳了
  • php charat
  • bg命令 将作业放到后台运行
  • 公司管理费一般占多少个点
  • 商业流通企业
  • 货物出库入库怎么记账
  • web cms漏洞
  • 公司盖厂房没有票要交税吗?
  • 用于app服务端的加速器
  • 购礼品送客户的文案
  • 销售二手固定资产
  • 废品销售是否缴纳增值税
  • 企业转钱给个人
  • 应收票据及应收账款包括哪些科目
  • 代扣代缴附加税减免政策文件
  • 研发支出资本化计入什么科目
  • 增值税零税率发票怎么开
  • 城建税50%减免条件
  • 材料款已付,发票没来
  • 招待客户住宿属于什么费用
  • 营改增对财务人员的影响
  • 非正常损失的原因是什么
  • 应交个人所得税借方余额表示什么
  • 复利年金终值计算器
  • 商业会计的任务有哪些
  • mysql中函数创建与调用示例
  • LNMP下使用命令行导出导入MySQL数据库的方法
  • mysql中怎么修改数据
  • sel 日志
  • 进程死锁原因
  • ubuntu系统安装报错
  • win7桌面右下角输入法图标不见了
  • SCP 方便的Linux文件互传
  • win8运行速度慢怎么办
  • Win10怎么安装软件
  • 如何选择性地隐藏部分任务栏程序
  • win8启动蓝屏
  • node的fs模块
  • 微信小程序实现人脸识别
  • JavaScript中创建文件
  • dos删除指定后缀文件
  • 应用框架的设计方法
  • node.js 10实战
  • 发票查验平台可以查询自己给对方开的发票吗?
  • 税务要求实名认证
  • 城管大队长级别高吗
  • 什么东西的海关不能寄
  • 国税开票二维码图片
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设