css滤镜兼容Chrome/FireFox

最新推荐文章于 2022-07-12 14:50:21 发布
原创 最新推荐文章于 2022-07-12 14:50:21 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #filter #ie

本文介绍了一种在Internet Explorer中使用滤镜效果同时保持与其他现代浏览器（如Chrome和Firefox）兼容的方法。通过调整opacity属性，可以实现在不同浏览器间的统一视觉表现。 
background-color:#000;
filter:alpha(opacity=10);



只能在IE里显示滤镜效果，在Chrome/FireFox里显示纯黑


增加


opacity:0.30;


能兼容Chrome/FireFox

                

        

    


  



    



                



	

		

			

				
					
兼容ie 和谷歌等浏览器的渐变背景色写法

				
			

			

				

					u013558123的博客
				

				

					01-25
					
					668
					
				

			

		

		

			
				
兼容ie 和谷歌等浏览器的渐变背景色写法

			
		

	



                

            
              



	

		

			

				
					
CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌

				
			

			

				

					09-25
				

			

		

		

			
				
标题中的“CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌”指的是在网页设计中，使用CSS来实现一个DIV元素的背景颜色渐变效果，并确保这种效果在不同的浏览器，包括Internet Explorer（IE）、Firefox和Google Chrome...

			
		

	



              


  
              

                


	

		

			

				
					
用JS操作CSS滤镜,注意IE、firefox、chrome浏览器对滤镜支持各不相同

				
			

			

				

					机场信息系统研究员的专栏
				

				

					12-25
					
					7375
					
				

			

		

		

			
				
在HTML页面中，可以通过JavaScript操作CSS来获得对页面样式强大的动态控制。CSS滤镜能够实现更加复杂的样式，配合JavaScript，可以做出类似Flash的特殊动画效果。


1  示例：自动缩放、有预载功能的相册
现在Internet网络上有很多网站提供一种相册功能，即可以把用户提供的多幅照片自动的顺序切换，并自动调整每幅图片的尺寸，使其大小接近。有些相册照片切换时还会有

			
		

	





	

		

			

				
					
如何让火狐谷歌chrome等浏览器支持一些css滤镜

				
			

			

				

					哈佛凌晨
				

				

					02-25
					
					6292
					
				

			

		

		

			
				
在ie下实现滤镜很容易，嘿嘿，火狐其实也不难，只是写法不同而已，我找到以下文章，copy过来共享下嗯：：


————————————————————————————————————————————————

在IE下使用的滤镜，可以实现很多不错的特效，但是在chrome和火狐opera等浏览器里这些就全都失效了，这是为什么呢？找了一下原来是因为 滤镜只是属于IE浏览器开发下的功能，不支

			
		

	



		

			
		



	

		

			

				
					
CSS滤镜实现半透明效果,兼容IE,火狐,谷歌浏览器

				
			

			

				

					dzf203的专栏
				

				

					08-13
					
					1306
					
				

			

		

		

			
				
转自：http://www.dianyisheji.com/?helpview-104
在做一个项目的前端开发的时，遇到这样一个问题，有一块内容是半透明效果，同时底层的背景图片需要能够实现更换，如图：
 
首页，我们把上图切成下面这两张图片：














（图1） 


（图2）




    
               

			
		

	





	

		

			

				
					
css最后一部分内容，灰度，滤镜，针对谷歌浏览器

				
			

			

				

					jingtian678的博客
				

				

					09-17
					
					1025
					
				

			

		

		

			
				


效果

拿图片做例子，看看效果

原图

 


-webkit-filter:none;

以下效果都不是截图，Chrome上看

模糊

 


-webkit-filter:blur(10px);

灰度

 


-webkit-filter:grayscale(0.5);

褐色

 


-webkit-filter:sepia(0.5);

亮度

 


-webkit-f...

			
		

	





	

		

			

				
					
CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)

				
			

			

				

					11-30
				

			

		

		

			
				
网上也找过，但不兼容IE或有bug，下面贴出本人亲测代码，兼容主流浏览器，包括Firefox、Chrome以及 IE 等主流浏览器（IE使用滤镜效果实现）：  复制代码代码如下: .btn_bg { width:150px; height:50px; background-...

			
		

	





	

		

			

				
					
css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式

				
			

			

				

					09-25
				

			

		

		

			
				
本文主要探讨如何使用CSS实现这一功能，并确保兼容性覆盖到主流浏览器，包括IE、Firefox、Chrome、Opera以及Safari。下面我们将详细讨论CSS中的滤镜（filters）属性，以及如何通过不同的前缀和非标准方法来实现跨...

			
		

	





	

		

			

          精选资源
				
					
兼容firefox，chrome的网页灰度效果

				
			

			

				

					01-20
				

			

		

		

			
				
 ie系列支持css滤镜，一句 filter:gray; 就解决了所有问题。但是，众所周知，ie以效率低著名，你会发现开启以后速度显著下降。并且，最致命的，在其他浏览器下无效。 有没有兼容所有浏览器的办法呢？有。JavaScript...

			
		

	





	

		

			

				
					
css中filter:alpha透明度使用小结兼容IE、火狐

				
			

			

				

					12-13
				

			

		

		

			
				
Alpha，设置透明度。 
用法： 
复制代码代码如下: FILTER:alpha(opacity=80);/* 设置不透明度为80 */ 
filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。 FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。 Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方

			
		

	





	

		

			

				
					
css页面变灰度filter兼容ie、firefox、chrome、opera、safari实现样式

				
			

			

				

					細水、長流√的专栏
				

				

					04-22
					
					2115
					
				

			

		

		

			
				
html { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
    _filter:none; 
} 



//来源于百度百科样式.

			
		

	





	

		

			

				
					
CSS过滤器无法生效,Chrome浏览器和Firefox中的CSS过滤器无法正常工作

				
			

			

				

					weixin_39524636的博客
				

				

					08-03
					
					585
					
				

			

		

		

			
				
我想创建一个Chrome扩展程序，它为色盲测试执行一些过滤，并且想要使用css/svg过滤程序，但是过滤程序不会影响正文背景。Chrome浏览器和Firefox中的CSS过滤器无法正常工作有什么建议吗？html {\t filter: grayscale(100%);}body, div {\t background-color: cyan;}/* Codepen style (ignore) *...

			
		

	





	

		

			

				
					
火狐谷歌chrome等浏览器支持一些css滤镜

				
			

			

				

					yongbuyanqi88888的专栏
				

				

					04-16
					
					1653
					
				

			

		

		

			
				
问题：
      filter:alpha(opacity=60)只在IE起作用，火狐、谷歌不支持
解决方法： 
      将原有的“filter:alpha(opacity=60)”改为filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;
问题解析如下：
     
滤镜只是属于IE浏览器开发下的功能，不支持IE内核的浏

			
		

	





	

		

			

				
					
CSS3中filter属性的兼容性问题

				
			

			

				

					weixin_44744746的博客
				

				

					07-12
					
					1689
					
				

			

		

		

			
				
firefox ， filter兼容性

			
		

	





	

		

			

				
					
css样式+filter,CSS3 filter（滤镜）属性详细解说

				
			

			

				

					weixin_27183235的博客
				

				

					08-03
					
					328
					
				

			

		

		

			
				
css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，h5时代的来临，我们可以通过css对图像进行处理。浏览器支持情况：只有IE浏览器不支持filter(滤镜)属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-filter(滤镜)属性现在规范中支持的效果有：grayscale 灰度(值为0-1之间的小数)filter:gray...

			
		

	





	

		

			

				
					
css filter详解

				
			

			

				

					奔跑的小小牛
				

				

					10-16
					
					5731
					
				

			

		

		

			
				
filter 属性详解








属性

名称

类型

说明



grayscale

灰度

值为数值

取值范围从0到1的小数(包括0和1)



sepia

褐色

值为数值

取值范围从0到1的小数(包括0和1)



saturate

饱和度

值为数值

默认是1，可以是小于1的小数

			
		

	





	

		

			

				
					
filter:alpha()与opacity

				
			

			

				

					weixin_42143048的博客
				

				

					02-12
					
					3625
					
				

			

		

		

			
				
filter:alpha()
filter与opacity一样都是设置透明度的，但是opacity 在IE8及以下是不兼容的；所以要设置filter属性；
a:hover {  opacity: 1;  filter: alpha(opacity=100);}

当直接利用opacity设置透明度的时候其大小范围为0-1之间，为1的时候为不透明，当利用filter:alpha()设置opacity...

			
		

	





	

		

			

				
					
深入理解CSS滤镜技术及其应用

				
			

			

				

					
				

			

		

		

			
				
在这些情况下，可能需要添加特定的浏览器前缀来提供兼容性，如`-webkit-filter`（针对旧版Chrome和Safari）和`-moz-filter`（针对旧版Firefox）。  5. **交互和动画**：CSS滤镜可以与CSS的其他特性（如过渡和动画）...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值