草庐IT

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

东非不开森 2023-05-17 原文

💭💭

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

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

毛玻璃效果

一、使用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()

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

  • 背景固定，背景的宽高要和图片一致
  • 在添加另外一个元素（即为滤镜），给它设透明度和模糊值
  • 给背景和滤镜设置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

  1. 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%);

(～￣▽￣)～

毛玻璃filterspanclasstokencsshtml前端

有关CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？ 最佳答案 对于“文本”数

  4. ruby-on-rails - before_filter 运行多个方法 - 2

    是否有可能:before_filter:authenticate_user!||:authenticate_admin! 最佳答案 before_filter:do_authenticationdefdo_authenticationauthenticate_user!||authenticate_admin!end 关于ruby-on-rails-before_filter运行多个方法，我们在StackOverflow上找到一个类似的问题： https://

  5. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  6. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  7. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  8. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  9. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  10. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

随机推荐