设置DIV背景颜色透明度

最新推荐文章于 2024-03-06 20:44:31 发布
最新推荐文章于 2024-03-06 20:44:31 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： web html5-css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzhw1985/article/details/84121537
版权

本节向大家爱描述一下如何设置DIV背景颜色透明度，opacityOpacity设置或检索透明渐变的开始透明度，Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。

设置DIV背景颜色透明度

通常我们通过DIV的style样式属性filter来设置DIV背景透明样式。可根据alpha提供的如下参数进行组合控制：

 

  1. filter:Alpha(enabled=bEnabled,style=iStyle,  
  2.  opacity=iOpacity,finishOpacity=iFinishOpacity,   
  3.  startX=iPercent,startY=iPercent,   
  4.  finishX=iPercent,finishY=iPercent);   
  5.  
 

各参数含义如下：
 

enabledEnabled设置或检索滤镜是否激活。
 

styleStyle设置或检索DIV背景透明渐变的样式。
 

opacityOpacity设置或检索透明渐变的开始透明度。
 

finishOpacityFinishOpacity设置或检索DIV背景透明渐变的结束透明度。
 

startXStartX设置或检索DIV背景透明渐变开始点的水平坐标。
 

startYStartY设置或检索DIV背景透明渐变开始点的垂直坐标。
 

finishXFinishX设置或检索DIV背景透明渐变结束点的水平坐标。
 

finishYFinishY设置或检索DIV背景透明渐变结束点的垂直坐标。
 

　Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
 

　Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：
 

DIV背景颜色透明度
 

实现上面这种效果的代码如下：
 

 

  1. <html> 
  2.  <head>  
  3.  <title>alpha</title>  
  4.  <style>//*定义CSS样式*//   
  5. <!--  
  6. DIV{position：absolute；left：50；top：70；width：150；}  
  7. //*定义DIV区域内的样式（位置为绝对定位，left、top、width的坐标）*//  
  8. img{position：absolute；top：20；left：40；  
  9.  filter：alpha(opacity=80)}   
  10. //*定义图片的样式，绝对定位，滤镜属性是透明度为80*//  
  11.  -->  
  12.  </style>  
  13.  </head>  
  14.  <body>  
  15.  <DIV>  
  16.  <pstylepstyle=“font-size：48；font-weight：bold；color：red；”>  
  17.  Beautiful</p>//*定义字体属性，前景色为红色*//   
  18.  </DIV>  
  19.  <p><imgsrcimgsrc=“ss01076.jpg”></p>  
  20. //*导入一张图片*//  
  21.  </body>  
  22.  </html>  
 

如果在上面的代码中稍做改动，则将产生另外多种效果。我们只修改img的样式属性，把head中的Img样式属性代码改为如下所示：
 

 

  1. img{position：absolute；top：20；left：40；  
  2.  filter：alpha(opacity=0,finishopacity=100,   
  3.  style=1,startx=0,starty=85,finishx=150,finishy=85);}   
  4. 　//*设置DIV背景透明渐变效果，起始坐标，终止渐变坐标，
  5.  并设置透明样式值（style=1）为　线形*//   
  6.  
 

这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果，点击缩略图可放大。
 

           style=1  style=2   style=3
 

 　Style=1  　Style=2Style=3
 

以上是CSS的Alpha滤镜属性的应用，具体应用还需要您自己找个例子练一练。

                

        

        




    

  


    

      

        

            

              
                
                  lzhw1985
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
html怎么让文字半透明,用js设置div背景半透明而文字不透明

				
			

			

				

					
				

				

					11-23
					
					895
					
				

			

		

		

			
				
这里用js来实现元素半透明，而其中的文字正常显示的方法：// 把16进制颜色转换成rgb格式。

			
		

	



                

            
              



	

		

			

				
					
div背景色半透明

				
			

			

				

					05-27
				

			

		

		

			
				
可实现div背景色半透明，不是用的filter:alpha(opacity=50);opacity:0.5;属性，而是用的rgba(0,0,0,0.5)，如果用的filter:alpha(opacity=50);opacity:0.5;那么它有个缺点，就是这个div里边的所有子元素也会有半透明效果

			
		

	



              


  
              

                


	

		

			

				
					
div背景颜色透明度设置

				
			

			

				

					qq_38464466的博客
				

				

					03-15
					
					1789
					
				

			

		

		

			
				
style="opacity:0.8;"

			
		

	





	

		

			

				
					
设置div背景透明的方法

				
			

			

				

					Welcome You(*^_^*)
				

				

					01-25
					
					2万+
					
				

			

		

		

			
				
设置div背景透明的方法
div背景透明常见的有两种方法：
1. 通过opacity属性设置，取值0~1,0表示透明，1表示不透明，但是这种方法会把div上的内容也同时进行透明设置。
效果如下：

2.通过rgba格式的background-color设置，格式为：background-color:rgba(0,0,0,0~1)，0表示透明，1表示不透明。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta

			
		

	



		

			
		



	

		

			

				
					
div 背景颜色透明度设置

				
			

			

				

					阳光之线
				

				

					09-16
					
					7695
					
				

			

		

		

			
				
div设置背景颜色透明度   

  












通常我们通过div的style样式属性filter来设置div的背景透明样式。可根据alpha提供的如下参数进行组合控制


filter: Alpha ( enabled=bEnabled , style=iStyle , opacity=iOpacity , finishOpacity=iFin

			
		

	





	

		

			

				
					
设置div背景透明的两种方法

				
			

			

				

					weiyuexin的博客
				

				

					07-07
					
					8784
					
				

			

		

		

			
				
实现div背景透明的两种方法

1.使用opacity属性
background-color：#000;
opacity: 0.5;

这样做可以设置div内部所以区域的透明度，但是也会影响里面的文字，效果图：

2、只改变背景透明度，不改变其中文字、图片等透明度的方法
background-color: rgba(0,0,0,0.5);

其中前三位数是设置背景颜色，取值范围是0~255，全部为零代表黑色，全部为255代表白色。
rgba即红色、绿色、蓝色、透明度（英语：Red, Green, Blue.

			
		

	





	

		

			

				
					
div 背景透明度 如何设置一个div的背景透明度

				
			

			

				

					01-21
				

			

		

		

			
				
你读DIV背景颜色透明度的设置是否熟悉，这里和大家简单分享一下，通常我们通过DIV的style样式属性filter来设置DIV背景透明样式，也可根据alpha提供的参数进行组合控制。 本节向大家爱描述一下如何设置DIV背景颜色...

			
		

	





	

		

			

				
					
div+css设置div的背景为半透明的方法

				
			

			

				

					09-25
				

			

		

		

			
				
-moz-opacity:0.5表示将元素的透明度设置为50%，即半透明状态。但是，这个属性只是被Firefox浏览器所识别，而不被IE浏览器支持。  对于大多数现代浏览器（除IE之外），opacity属性用于设置元素及其子元素的透明度。...

			
		

	





	

		

			

				
					
div设置背景图片透明度且字不透明

				
			

			

				

					09-26
				

			

		

		

			
				
在网页设计中，有时我们需要...4. 若需设置背景颜色透明度，可以使用`rgba`函数，或在旧版浏览器中使用`FILTER: Alpha(opacity=50)`。  通过以上方法，你可以灵活地创建出背景图片透明，而文字仍然清晰可见的网页元素。

			
		

	





	

		

			

				
					
div透明模糊背景-渐变背景

				
			

			

				

					qq_39695210的博客
				

				

					10-20
					
					336
					
				

			

		

		

			
				
【代码】div透明模糊背景-渐变背景。

			
		

	





	

		

			

				
					
css中div透明度有几种方法设置？

				
			

			

				

					高先生的猫
				

				

					08-18
					
					7435
					
				

			

		

		

			
				
css设置div背景透明有两种方法：第一种使用opacity：0~1，这个方法有个缺点，就是内容也会跟着透明；第二种方法就是rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。



一、cssrgba()设置颜色透明度

语法：


rgba（R,G,B,A）;

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对..

			
		

	





	

		

			

				
					
【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

					
最新发布

				
			

			

				

					让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 ) 
				

				

					03-06
					
					3718
					
				

			

		

		

			
				
一、CSS 背景设置
1、背景颜色
2、背景图片
3、背景图片平铺样式
4、背景图片位置
5、超大背景图片设置
网页背景兼容问题
超大背景图片推荐定位
超大背景图片编辑策略
6、背景附着
7、背景样式简写
8、背景半透明

			
		

	





	

		

			

				
					
【HTML＆CSS】如何设置透明的div盒子？

				
			

			

				

					m0_60364956的博客
				

				

					05-20
					
					1万+
					
				

			

		

		

			
				
有时候我们想把盒子的背景设置成透明的，或者半透明的，看起来更美观。这就需要我们给颜色加一个透明度。

			
		

	





	

		

			

				
					
div 背景透明度如何设置一个div的背景透明度

				
			

			

				

					Wilder_Child的专栏
				

				

					03-01
					
					2268
					
				

			

		

		

			
				
感谢作者感谢原创~
div
背景透明度如何设置一个div的背景透明度
来源：互联网
作者：佚名 时间：12-31 16:55:48
【大 中小】 
如何设置一个div的背景透明度,对于一些新手朋友有些陌生，接下来详细介绍实现方法，有需要了解的朋友可以参考下
你读DIV背景颜色透明度的设置是否熟悉，这里和大家简单分享一下，通常我们通过DIV的style样式属性filter来设置DIV背

			
		

	





	

		

			

				
					
Html5 CSS样式设置div背景色透明

				
			

			

				

					茫茫灬人海
				

				

					06-01
					
					2万+
					
				

			

		

		

			
				
今天写H5的时候，加了一个背景图片，但是有几个div是白色的，显然遮挡了Html5 CSS样式设置div背景色透明&lt;div style="background-color:transparent;"&gt;    ....&lt;/div&gt;...

			
		

	





	

		

			

				
					
html中如何设置背景和背景颜色的透明度

				
			

			

				

					kerryqpw的博客
				

				

					04-19
					
					8万+
					
				

			

		

		

			
				
html中如何设置背景和背景颜色的透明度

			
		

	





	

		

			

				
					
Web前端html中通过CSS来设置div背景颜色透明度

				
			

			

				

					MIP
				

				

					10-24
					
					9301
					
				

			

		

		

			
				
https://www.o6c.com/web/2016/10/22/379.html

			
		

	





	

		

			

				
					
css设置透明度的两种方法

					
热门推荐

				
			

			

				

					weixin_44531304的博客
				

				

					05-24
					
					11万+
					
				

			

		

		

			
				
一、css rgba()设置颜色透明度
语法：
rgba（R,G,B,A）;

RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
rgba（)里的值的介绍：
R：红色值。正整数 （0~255）
G：绿色值。正整数 （0~255）
B：蓝色值...

			
		

	





	

		

			

				
					
dw如何设置div背景透明度

				
			

			

				

					06-10
				

			

		

		

			
				
要设置一个 div 的背景透明度，可以使用 CSS 中的 `rgba()` 函数。其中 `rgba()` 中的第四个参数表示透明度，取值范围为 0.0 到 1.0，0.0 表示完全透明，1.0 表示完全...你可以根据需要设置不同的背景颜色和透明度。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值