烟花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>