请选择 进入手机版 | 继续访问电脑版

万邦! 学习论坛

 找回密码
 立即注册
搜索
查看: 4945|回复: 0

html 背景透明文字不透明

[复制链接]
发表于 2018-6-11 09:10:43 | 显示全部楼层 |阅读模式

基本概念:

在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜

1.准备一张jpg图片(任何格式的图片都可以),作为背景图

2.新建html文件,将以下代码复制进去


[html] view plain copy



  • <!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=gbk" />   
  • <title>背景透明文字不透明测试</title>   
  • <style type="text/css">  
  • .warp{ background:#eee url(back.jpg) no-repeat left top; width:440px;height:400px;    border:1px solid #ccc;}  
  • .content { width:180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6)!important;  
  • filter:Alpha(opacity=60); background:#fff; /* 使用IE专属滤镜实现IE背景透明*/ }  
  • .content p{ position:relative;} /*实现IE文字不透明*/   
  • </style>   
  • </head>   
  • <body>   
  • <div class="warp">   
  • <div class="content">  
  •     <p>  
  •         背景透明文字不透明  
  •     </p>  
  • </div>   
  • </div>   
  • </body>   
  • </html>   


3.打开html页面

原文:http://blog.csdn.net/caoguangguang/article/details/7378357


---------------------------------华丽的分界线-------------------------------
北京万邦易嵌科技有限公司(www.wanbangee.com)专业提供单片机、M3/M4linuxAndroidQT技术服务、技术培训。
详细咨询请加QQ:715493858

QQ|Archiver|手机版|小黑屋|万邦易嵌学习论坛. ( 京ICP备17017219号 )

GMT+8, 2020-3-29 13:38

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表