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

最新推荐文章于 2022-09-30 16:46:37 发布
最新推荐文章于 2022-09-30 16:46:37 发布
阅读量737 收藏
点赞数
分类专栏： 前端开发css+js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gsls181711/article/details/25316375
版权

/*CSS*/
.waps{ background:url(test.jpg) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}


.con{ text-align:left; width:500px; height:400px; margin:0px auto; padding:100px 50px;
background:rgba(255, 255, 255, 0.8) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=80); background:#fff;/*实现IE背景透明*/}


.con p{ position:relative;}/*实现IE文字不透明*/

/*HTML代码*/
<body>
<div class="waps">
   <div class="con">
     <p>CSS实现背景透明，文字不透明（各浏览器兼容）CSS实现背景透明 
    </p>
   </div>
</div>
</body>


Allen_Kao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 背景透明文字(内容)不透明三种实现方法
aodunxi6544的博客
06-03 718
好久没写博客了。以前还想着最少一个月抽空写几篇。结果没做到O(∩_∩)O~~。好吧。现在努力，继续坚持。 看着以前写的东西，感觉自己在逐渐成长。 先上图: 本文主要记录如上图一样的。文字或内容不透明，但背景有一个“透明蒙版”的效果。 平时一般用的方法有三种： ① 先创建一个透明度跟“透明蒙版”一样的1X1大小的透明png图片。然后采用填充背景图的方法(repeat)，实现背...
CSS代码实现背景透明而文字不透明
04-30
CSS代码实现背景透明而文字不透明，兼容支持火狐、360、谷歌、IE6-IE11等浏览器
CSS实现背景透明，文字不透明，兼容所有浏览器
weixin_34262482的博客
03-19 356
  重点内容入口： IE6和部分IE7内核的浏览器会读懂rgba IE专属滤镜 filter:Alpha的兼容处理 背景透明，文字不透明全兼容方案 测试浏览器： VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari ...
CSS实现背景透明文字不透明的可行方法(兼容各浏览器)
12-13
在实际应用中，为了更好地实现跨浏览器兼容性，还可以考虑使用CSS预处理器（如Sass或Less）以及自动化工具（如autoprefixer）来自动添加必要的浏览器前缀，以确保在各种浏览器版本中都能正常工作。此外，随着技术的...
CSS实现背景透明文字不透明兼容各种浏览器有图有真相
09-25
本文将介绍如何使用CSS来实现背景透明、文字不透明，并且兼容包括IE6在内的各种主流浏览器。 首先，我们来看一下基本的CSS语法。在现代浏览器中，我们可以利用`rgba()`函数来设置元素的背景透明度。`rgba()`函数...
CSS3实现背景透明文字不透明的示例代码
09-24
在CSS3中，实现背景透明而文字不透明的效果有多种方法。这里我们将详细探讨如何通过修改示例代码来实现这一目的。首先，我们要明白CSS3引入的新特性，如`rgba()`函数和`background-color`的透明度控制，可以帮助我们...
CSS实现背景透明，文字不透明（兼容各浏览器）
weixin_30680385的博客
02-15 66
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜，代码如下： <!...
css 背景透明 文字不透明
Young
03-13 1183
background:rgba(255, 255, 255, 0.9)!important; filter:Alpha(opacity=90); background:#fff; /*　使用IE专属滤镜实现IE背景透明*/ //设计盒子的最小宽度：（在内容不超过盒子的时候，盒子最小宽度不变，内容超过盒子的时候，盒子会自动撑高） width:auto !important; min-wi
css 背景透明，文字不透明
dwc2011的专栏
09-09 702
css 背景透明、文字不透明实现代码 关键点：1. 在显示文字标签兄弟节点上加一个块级元素 div 用于设置背景为透明；2. div 和 ul 需要绝对定位，position 设置为 absolute。代码： 背景透明，文字不透明 html, body{ width: 95%; height: 95%
CSS 实现背景透明，文字不透明
lannieZ的博客
06-09 408
<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透明度设置--背景透明但文字不透明
qq_40138803的博客
07-13 8498
1、问题提出：很多情况下，我们可能需要给页面上的某些元素添加一个背景，然后通过虚化背景实现有个透明层的效果。需要达到的效果如下： 2、预想的处理方式：在景点卡的div元素设置一个白色背景，并设置白色背景的透明度为0.2。 3、实际处理达到的效果 设置样式为： background-color: white; opacity: 0.2; 实际效果为： 从实际效果可以发现，不仅仅背景达到了透明的效果，在div元素内的其他子元素也具备了相同的透明效果，导致其他元素看不清或看不见。 4、问题原因 使用opac
CSS实现背景透明，文字不透明(兼容各种浏览器)
boia
04-02 3782
IE6是大家都十分头痛的一个浏览器，为了兼容它，一个很小的项目就可以浪费你很多的时间和精力，最简单的有margin、padding，最难的那就不知道了，今天在这里做了一个滤镜的效果，实现chrome和FF的滤镜很简单，但是要实现IE的滤镜，那就有点繁琐了。 背景透明 body{margin:0;padding:0;} .back{width:800px;h
如何用CSS实现背景透明，文字不透明（兼容各大浏览器）
顛沛流離的小時光
08-16 798
很多时候，我们需要背景有一定的透明度，可是当我们给背景元素加了半透明属性opacity后，会发现，其中的文字也跟着相同程度的透明了。可是，这不是我们想要的结果。我们想要的是背景半透明，文字不透明。
css背景颜色透明，字体不透明
魏依一的博客
09-30 382
background-color:rgba(7,176,217,0.3);
网站开发进阶（五十玖）css实现背景透明，文字不透明
IT全栈 华强工作室
04-13 1568
背景透明，文字不透明的解决方法： 为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。 使用CSS3新属性rgba。 实现透明的方法： css3的opacity，取值从 0 到 1，如opacity : 0.5，IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性，例如：filter : Alpha(opacity=50)。 css3的rgba(red, green, blu
css 背景透明，文字不透明写法
茉莉的博客
04-01 210
css 背景透明 文字不透明的方法 html代码如下： <div class="prizeNum"> <p class="prizeNameTitle">name</p> </div> css 代码如下： .prizeNum{ color: #fff; font-size: 12px; background-color: rgba(0,0,0,0.5); width: 67%; height: 45px; border-radius.
css如何实现背景色透明或半透明但内容不透明
最新发布
06-06
CSS提供了opacity属性来实现背景色透明或半透明，但这也会导致内容透明，这并不是我们想要的结果。而解决这个问题的方法是使用rgba颜色表示法。 RGBA有四个参数：红、绿、蓝和alpha（透明度）。alpha参数是一个0到1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值