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

发布时间:2023-09-09 18:30

💭💭

✨: 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%);

(~ ̄▽ ̄)~

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号