只半透明背景不透明文字的CSS写法

最新推荐文章于 2019-03-18 16:15:48 发布
最新推荐文章于 2019-03-18 16:15:48 发布
阅读量1.5k 收藏
点赞数
分类专栏： css 文章标签： css filter 半透明
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cengjingcanghai123/article/details/24421711
版权 
</pre><pre code_snippet_id="309992" snippet_file_name="blog_20140424_1_6547889" name="code" class="html"><pre code_snippet_id="309992" snippet_file_name="blog_20140424_1_6547889">
 


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>只半透明背景不透明文字的CSS写法</title><style type="text/css">  #container{    border:1px solid #c00;    background-color:rgba(212,0,0,0.5);    *background:#f00;    *filter:alpha(opacity=50);    width:500px; margin:40px auto;    line-height:200%;    font-size:14px;    padding:14px;  }  #container *{ position:relative;}</style></head><body><div id="container"><span>我是内容我是内容我是内容我是内容</span></div><p>兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性。</p><!--下面只是说明与程序代码无关--><div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;"><a href="http://www.51xuediannao.com">我是内容我是内容我是内容我是内容</a><br/><span>我是内容我是内容我是内容我是内容</span><span>我是内容我是内容我是内容我是内容</span><span>我是内容我是内容我是内容我是内容</span></div></body></html> 

 

 
 
 
 
延伸阅读
 
 
 
 
▶ Walkthrough007
 


                

        

        

    




    

      

        

            

              
                
                  曾经沧海难为水-除却巫山不是云
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
css实现背景半透明文字不透明的效果示例

				
			

			

				

					09-24
				

			

		

		

			
				
本篇文章主要介绍了css实现背景半透明文字不透明的效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	



                

              
                



	

		

			

				
					
微信小程序一些小问题记录

				
			

			

				

					u013165058的博客
				

				

					06-10
					
					287
					
				

			

		

		

			
				
1.背景设置透明，字不透明。

设置background:rgba(0,0,0,0.4);color:#fff;



2.设置边框不可以设置1rpx，应该为1px，要不在一些苹果手机上可能不显示。



3.设置边框为内边框。

box-sizing:border-box;



4.纯数字或者字母不换行问题。

word-break:break-all;




...

			
		

	



                


  
              

                


	

		

			

				
					
css实现背景半透明文字不透明的效果

				
			

			

				

					祈澈菇凉
				

				

					05-14
					
					7777
					
				

			

		

		

			
				
                      图片.png
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style&gt;
            ht

			
		

	





	

		

			

				
					
【前端】CSS实现背景图片透明和文字不透明效果

				
			

			

				

					程序猿开发日志【学习永无止境】
				

				

					06-20
					
					6万+
					
				

			

		

		

			
				
项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。
1.毛玻璃效果：背景图 + 伪类 + flite:blur(3px)

.demo1{
    width: 500px;
    height: 300px;
    line-height: 50px;
    text-align: center;
}
.demo1:b

			
		

	



		

			
		



	

		

			

				
					
实现背景透明文字不透明

				
			

			

				

					长云的博客
				

				

					07-02
					
					1460
					
				

			

		

		

			
				
background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0 !important;

			
		

	





	

		

			

				
					
小程序 view 背景半透明设置

				
			

			

				

					Aaronzzq的专栏
				

				

					03-18
					
					1万+
					
				

			

		

		

			
				
&lt;view style='width:750rpx; background:#000000; opacity:0.5; margin-top:-10rpx'&gt;

&lt;text class= 'slide-txt'&gt;{{item.txt}} &lt;/text&gt;

&lt;/view&gt;





&lt;view style='width:750rpx; bac...

			
		

	





	

		

			

				
					
纯CSS实现背景半透明文字不透明效果兼容IE6

				
			

			

				

					09-25
				

			

		

		

			
				
在某些情况下可能会需要背景半透明文字不透明这样的效果，实现起来并不复杂，通过滤镜便可做到，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助

			
		

	





	

		

			

				
					
CSS代码实现背景透明而文字不透明

				
			

			

				

					04-30
				

			

		

		

			
				
CSS代码实现背景透明而文字不透明，兼容支持火狐、360、谷歌、IE6-IE11等浏览器

			
		

	





	

		

			

				
					
纯css实现背景图片半透明内容不透明的方法

				
			

			

				

					09-24
				

			

		

		

			
				
主要介绍了纯css实现背景图片半透明内容不透明的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
CSS3实现背景透明文字不透明的示例代码

				
			

			

				

					09-24
				

			

		

		

			
				
主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
背景使用opacity设置透明度时，导致字体也出现透明

				
			

			

				

					gll77
				

				

					03-27
					
					1万+
					
				

			

		

		

			
				
解决方法：通过使用background-color：rgba（0 , 0 , 0 , .7），即可解决。

			
		

	





	

		

			

				
					
小程序 遮照 mask 背景透明，里面内容不透明

				
			

			

				

					solocao的专栏
				

				

					02-23
					
					3966
					
				

			

		

		

			
				
1、错误的写法
.mask {
	background: black;
    opacity: 0.5;
}

2、正确的写法
.mask {
	background: rgba(0, 0, 0, 0.5);
}




			
		

	





	

		

			

				
					
微信小程序透明度 opacity

					
热门推荐

				
			

			

				

					UFO00001的博客
				

				

					05-23
					
					6万+
					
				

			

		

		

			
				
wxml文件中 ：style="opacity:{{number}}"   
number代表透明度的值 取值范围0—1  0代表不透明 1代表全透明 
具体应用中可在js文件中写个方法对number根据用户动作进行动态设置

			
		

	





	

		

			

				
					
如何实现按钮底部半透明，但是不影响按钮的字体正常显示

				
			

			

				

					babulongbo的博客
				

				

					09-01
					
					1971
					
				

			

		

		

			
				
有很多banner的图片都有两个半自动的按钮（所谓半自动就是需要人为触发的事件），字体颜色不受背景颜色的半透明影响。它的思路是首先定义一个外层（div,span…..），内层加一个标签作为按钮，一个标签作为背景。结构为：<div>
    <a href="javascript:;" name="prev">prev</a>
    <span class="btn_bg"></span>
</di

			
		

	





	

		

			

				
					
半透明背景，文字不透明，ie8和现代浏览器的兼容性

				
			

			

				

					nox
				

				

					12-29
					
					554
					
				

			

		

		

			
				
Document
    
    ul li{
    width: 300px;
    height: 250px;
    position: relative;
    overflow:hidden;
    }
     ul li .mymark, ul li a{
      width:100%;
    position: absolute;
    b

			
		

	





	

		

			

				
					
CSS只改变背景透明度，不改变子元素透明度

				
			

			

				

					老邢的IT译站
				

				

					07-30
					
					3199
					
				

			

		

		

			
				

一般情况下，我们可以使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即使对子元素重新定义也没有用，例如：
 
&lt;div style="opacity:0.4; background-image:url(...);"&gt;
 &lt;div style="opacity:1.0;"&gt;
  显示文字
 &lt;/div&gt;
&...

			
		

	





	

		

			

				
					
透明背景的设置

				
			

			

				

					PiscesGirl的博客
				

				

					04-17
					
					1327
					
				

			

		

		

			
				
如何实现背景透明，文字不透明，兼容所有浏览器？我们平时所说的调整透明度，其实在样式中是调整不透明度，如下图所示例：打开ps，在图层面板上，可以看到设置图层整理不透明度的菜单，从 0% （完全透明）到 100%（完全不透明）。实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法    css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8
    css3

			
		

	





	

		

			

				
					
CSS实现背景图片透明而文字不透明效果

					
最新发布

				
			

			

				

					05-19
				

			

		

		

			
				
可以使用 CSS3 中的 RGBA 颜色值来实现这个效果。具体实现步骤如下：

1. 将背景图片作为元素的背景（background）。

2. 设置元素的背景颜色为 RGBA 颜色值，例如：background-color: rgba(255, 255, 255, 0.5)。

3. 设置元素内文字的颜色为不透明的颜色，例如：color: #000。

其中，RGBA 颜色值中的第四个参数表示透明度，取值范围为 0 ~ 1，0 表示完全透明，1 表示完全不透明。

示例代码如下：

```css
.element {
  background: url('example.jpg') no-repeat center center fixed;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.5);
  color: #000;
}
```

这样，就可以实现背景图片透明而文字不透明的效果。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值