css背景透明度怎么设置（CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter）

💭💭

✨： 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

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

(～￣▽￣)～