烟花png透明素材（背景透明(opacity vs background)）

最近在做项目的时候 
    
    
    
  ，遇到透明度的相关设置 
    
    
    
  。

常用的背景透明设置可分为两种
     


     


     


     
，分别是：

一是给background设置透明度
     


     


     


     
。 二是利用opacity属性 




 




 




 




。

在跳了一些坑之后 




 




 




 




，本人更推荐给background设置透明度 

   

   

   

 ，为什么呢？

想一下
     

     

     

     ，我们为什么会想要实现透明效果呢？

​ 大多情况都是父盒子设置了一个很美的或很酷的背景图片  




  




  




  




，而子盒子则想要实现一定的透明效果 


  


  


  


，从而营造一种很高尚的效果 

   

   

   

 。类似于下面这种效果（图片是随便从网上找的
     
     
     
     ，图片来源）
     

     

     

     。

为什么我推荐给background设置透明度   




   




   




   



，而不是使用opacity属性呢？

​ 因为background的透明度效果只应用于背景 



 



 



 



，而opacity属性却会影响子盒子内所有内容                   ，最重要的是文字和图片颜色也会受到影响
    




    




    




    


，这就很让人头大  




  




  




  




。

​ 如下图



















，项目中父盒子设置了一个很酷的背景图片                   ，子盒子设置了透明效果 


  


  


  


。UI小哥哥给的设计里面用到了opacity属性
     



     



     



     

，代码如下：

 在我设计整体架构的时候



















，并没有意识到什么不对 
    
    
    
  ，但是具体内容一放上去
     


     


     


     
，就察觉到不对了
     
     
     
     。看下面的文字和图片 




 




 




 




，本来文字设置的颜色是白色 

   

   

   

 ，但是实际却有一种偏灰的效果；图片也有蒙了一层灰的效果
     

     

     

     ，暗沉暗沉的   




   




   




   



。

查了很多资料  




  




  




  




，看到有些说用定位之类的解决 


  


  


  


，感觉很麻烦
     
     
     
     ，没有找到适合的解决方法   




   




   




   



，只能先放弃了这个属性 



 



 



 



，愁~

​ 这里没办法用background解决                   ，因为前面已经使用了这个属性
    




    




    




    


，也设置了相应的透明度 



 



 



 



。

后续码代码的时候



















，突然灵光一现                   ，把opacity设置的透明度与background透明度相乘
     



     



     



     

，作为background新的透明度



















，就好了呀！！！

代码如下：

 效果就很好：

所以 
    
    
    
  ，为了不让子盒子的内容（文字 
    
    
    
  、图片等）失去原本设计的颜色
     


     


     


     
，尽量不要使用opacity属性                   。

至于具体具体透明度的设置：

​ rgba()中a代表透明度 




 




 




 




，和opacity属性一样 

   

   

   

 ，取值 0-1 之间
     

     

     

     ，表示从 完全透明完全不透明
    




    




    




    


。

至于给背景和边框设置的linear-gradient线性渐变  




  




  




  




，后续会整理一篇博客



















。

若是想给背景设置一个图标 


  


  


  


，连带着一起设置透明度
     
     
     
     ，这样的话要怎么做呢？这样其实也有两种实现方式：

直接给目标模块设置opacity属性   




   




   




   



， 给目标模块的背景设置透明属性 



 



 



 



，同时创建一个跟目标模块大小一样的模块                   ，绝对浮动起来
    




    




    




    


，然后opacity设置对应的透明度                   。将这个模块遮盖在目标模块上面



















，并设置z-index: -1;
     



     



     



     

。

分别实现的效果如下：

总体来说                   ，感觉没有什么区别
     



     



     



     

，但是仔细看字体



















，“主要内容区1 
    
    
    
  ”字体受到透明度影响了 
    
    
    
  ，但“主要内容区2
     


     


     


     
”没有
     


     


     


     
，字体一多 




 




 




 




，对比就很明显了：

 这样就看出来了 

   

   

   

 ，所以推荐第2种方式
     

     

     

     ，这样调节图片透明度的时候  




  




  




  




，不会影响到字体颜色 


  


  


  


，或是
     
     
     
     ，我在内容区域增加图片



















。

 这样是不是更明显了 
    
    
    
  。对于为啥要设置z-index: -1;   




   




   




   



，是因为浮动的层级比文档流要高 



 



 



 



，如果不降低它的层级                   ，会使得logo盖住具体内容
    




    




    




    


，如下：

 当然



















，如果你想要这种样式                   ，就可以不设置z-index
     


     


     


     
。

 代码如下：

<div class="main1"> 主要内容区1 </div> <div class="main2"> <div class="main2-bg"></div> 主要内容区2 </div> <style> .main1, .main2, .main2-bg { width: 500px; height: 200px; } .main1 { background: rgba(255, 255, 255, 1) url(../assets/imags/background.jpg) center center no-repeat; opacity: 0.3; } .main2 { background: rgba(255, 255, 255, 0.3); position: relative; } .main2-bg { position:absolute; z-index: -1; background: rgba(255, 255, 255, 1) url(../assets/imags/background.jpg) center center no-repeat; opacity: 0.3; } </style>