CSS实现背景透明，文字不透明（兼容各浏览器）

最新推荐文章于 2023-03-23 10:29:49 发布
最新推荐文章于 2023-03-23 10:29:49 发布
阅读量1.6w 收藏 5
点赞数
分类专栏： asp.net 文章标签： 浏览器 css web开发 ie xhtml filter

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

<!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=utf-8" /> 
<title>Web开发者网络 - www.admin10000.com</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>Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。</p></div> 
</div> 
</body> 
</html> 
 

以上代码在IE6.0+/FF3.0+/Opera10+/Chrome/Safari 均测试通过

caoguangguang
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS代码实现背景透明而文字不透明
04-30
CSS代码实现背景透明而文字不透明，兼容支持火狐、360、谷歌、IE6-IE11等浏览器
css实现背景透明，文字不透明
bandianwv272993的博客
03-10 458
实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法 css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8 css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8) IE专属滤镜filter:Alpha(opacity=x)，x 的取值从 ...
css如何实现背景透明，文字不透明？
weixin_30493401的博客
10-16 1052
之前做了个半透明弹层，但设置背景半透明时，子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻，在这里做一些总结，方便以后使用。 背景透明，文字不透明的解决方法： 为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。 使用CSS3新属性rgba。 ...
CSS 实现背景透明，文字不透明
lannieZ的博客
06-09 395
<div class="shopAddress">上塘店</div> .shopAddress { width: 72px; height: 36px; background: #2C5894; opacity: 0.4; border-radius: 8px; font-size: 16px; line-height: 36px; text-align: cente.
CSS实现背景透明文字不透明兼容各种浏览器有图有真相
12-13
IE6是大家都十分头痛的一个浏览器，为了兼容它，一个很小的项目就可以浪费你很多的时间和精力，最简单的有margin、padding，最难的那就不知道了，今天在这里做了一个滤镜的效果，实现chrome和FF的滤镜很简单，但是要...
CSS实现背景透明文字不透明的可行方法(兼容各浏览器)
12-13
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持 rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明...
css透明度设置--背景透明但文字不透明
qq_40138803的博客
07-13 8312
1、问题提出：很多情况下，我们可能需要给页面上的某些元素添加一个背景，然后通过虚化背景实现有个透明层的效果。需要达到的效果如下： 2、预想的处理方式：在景点卡的div元素设置一个白色背景，并设置白色背景的透明度为0.2。 3、实际处理达到的效果 设置样式为： background-color: white; opacity: 0.2; 实际效果为： 从实际效果可以发现，不仅仅背景达到了透明的效果，在div元素内的其他子元素也具备了相同的透明效果，导致其他元素看不清或看不见。 4、问题原因 使用opac
背景透明，文字不透明的兼容处理
关注我！带你一路 "狂飙" 到底！
09-15 947
我们在做PC端项目的时候，常常会碰到透明背景和透明图片的的需求，但是透明度常常有会发生很多问题，特别是背景透明内容不透明，想要兼容所有浏览器实现起来就比较麻烦。其实平时说的调整透明度，其实是在样式中调整不透明度，如下图：打开ps，在图层面板上，可以看到设置-图层调整 不透明度的菜单，从 0% （完全透明）到 100%（不透明）实现透明的css样式通常有以下3种方式，以下是不透明度都为50%的写法valuealphavalue。
css 实现背景图片透明文字不透明
weixin_62312817的博客
03-23 1029
css实现背景色透明可以用rgba直接设置背景颜色，背景色透明但是文字不会受影响。但是现在变成了背景图片，就没法用了。注意： 伪元素要搭配position定位使用 我前面用了display定位注释掉了，不然z-index不起作用。opacity: 透明度来设置 ，哎呀，背景图片变透明了，但是文字也一起透明，很不好看。::before伪元素 设置。
Css如何实现背景色透明或半透明但内容不透明
09-25
实现背景色透明或半透明但内容不透明，在某些情况下还是比较实用的，下面有个不错的示例，感兴趣的朋友可以参考下
纯css实现背景图片半透明内容不透明的方法
12-13
前言 最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。 还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 正确姿势 我想到两个方法，第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现 <!DOCTYPE html> <html lang="en"> <head> <meta cha
CSS中如何实现背景图片透明并且固定和文字不透明效果
热门推荐
qq_56924476的博客
08-01 1万+
设置背景图片的透明度，并且该背景图片不随鼠标滚动而移动，我们可以使用滤镜filter中的透明度设置opacity 至于opacity的作用:转化图像的透明程度。值定义转换的比例：值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 <body>里面不能直接设置图片的透明度，需要借助<div
css实现背景透明，内容不透明
每天多懂一点点
03-20 1616
实现透明的css方法通常有以下3种方式： •  css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.5 •  css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.5) •  IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filt
css实现背景图片透明内容不透明
huiaixing的博客
04-03 1万+
实现背景图片透明而内容不透明有很多种方法，但是我最常用的是用before伪元素。 大家肯定都知道透明是使用opacity，但opacity会让背景及其子元素的所有内容都透明，比如： <style> * { margin: 0; padding: 0; } .box1 { width: 500px; height: 340px;
css 透明背景_css容易使人蒙圈的几个经典问题
weixin_39639622的博客
11-20 395
本文摘自这一年来自己在工作中经历的几个比较好的CSS问题(不一定复杂，但个人觉得都挺值得一说)，这些CSS问题平时很少遇到，即使遇到后也不一定知道解决方案，即使知道解决方案也不一定知道产生的原理，同时也准备了2个JS问题，希望帮到各位朋友。期待您的点赞，谢谢。一、CSS篇1.1 元素默认蓝色边框input标签元素(如button、text 、areatext)的一些事件(如click、focus等...
CSS 设置背景颜色透明，文字不透明
weixin_33915554的博客
04-22 187
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS实现背景图片透明文字不透明效果的两种方法
最新发布
05-30
方法一：使用CSS3中的background-clip和text-fill-color属性 ```css .container { background-image: url("your-image-url.jpg"); background-repeat: no-repeat; background-size: cover; color: white; background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; } ``` 上述代码中，我们将背景图片设置为容器的背景，并使用background-clip和-webkit-background-clip属性将背景图片裁剪成文本的形状。然后，使用text-fill-color属性将文本颜色设置为透明，从而实现透明的文本效果。 方法二：使用伪元素与混合模式 ```css .container { background-image: url("your-image-url.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; } .container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); mix-blend-mode: overlay; } .container p { position: relative; z-index: 1; color: white; } ``` 上述代码中，我们将背景图片设置为容器的背景，并使用伪元素::before在容器中创建一个半透明的黑色遮罩。然后，使用mix-blend-mode属性将遮罩与背景图片混合，实现背景图片透明的效果。最后，将文本的z-index属性设置为1，使其显示在遮罩层之上，达到不透明的文本效果。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值