css背景颜色半透明，文字不透明（兼容ie、火狐、chrome）

最新推荐文章于 2023-03-23 10:29:49 发布
最新推荐文章于 2023-03-23 10:29:49 发布
阅读量470 收藏
点赞数
原文链接：https://blog.csdn.net/weixin_33898876/article/details/91900517?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-4.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-4.nonecase
版权 
<style type="text/css">
.div {
    background:rgba(255, 255, 255, 0.4) none repeat scroll 0 0 !important; /* 实现FF背景透明，文字不透明 */
    filter:alpha(opacity=40);
    background:#fff; /* 实现IE背景透明 */
}
.div p { position:relative; }
</style>
浮裕的小鱼干
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS代码实现背景透明而文字不透明
04-30
本文将详细讲解如何使用CSS代码来达到这一目标，并确保代码在火狐（Firefox）、360浏览器、谷歌（Chrome）以及IE6到IE11等主流浏览器上都能正常工作。 首先，我们可以使用CSS的 rgba() 颜色函数。rgba() 函数允许...
ie7+背景透明文字不透明超级简单的实现方法
09-04
在IE7及以上版本，以及Firefox 3.0+、Opera 10+、Chrome和Safari等现代浏览器中，这种效果可以通过简单的方法来实现。本文将介绍一种有效且简单的技巧，适用于那些需要在IE7+环境中处理背景透明的文字不透明问题。 ...
Css如何实现背景色透明或半透明但内容不透明
09-25
实现背景色透明或半透明但内容不透明，在某些情况下还是比较实用的，下面有个不错的示例，感兴趣的朋友可以参考下
css如何实现背景透明，文字不透明？
weixin_30493401的博客
10-16 1060
之前做了个半透明弹层，但设置背景半透明时，子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻，在这里做一些总结，方便以后使用。 背景透明，文字不透明的解决方法： 为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。 使用CSS3新属性rgba。 ...
CSS使块半透明方法，兼容IE6
weixin_30867015的博客
07-04 97
前言 今天LOL玩机器人玩得真心不爽，实在崩溃，还是逛博客园比较爽些，记录自己的成长！说句实话我在编程方面确实是个菜鸟，菜到一种超神的地步，没一样自己特擅长的，悲催...... 废话少说，进入正题，HTML5和CSS3快速发展，很多一以前实现起来十分麻烦的东西现在变得十分简单，例如今天的半透明效果，在CSS3中现在有了opacity这个样式，可以很简单的设置，不过很悲催，早期的IE和不是很新版...
css 实现背景图片透明文字不透明
weixin_62312817的博客
03-23 1081
css实现背景色透明可以用rgba直接设置背景颜色，背景色透明但是文字不会受影响。但是现在变成了背景图片，就没法用了。注意： 伪元素要搭配position定位使用 我前面用了display定位注释掉了，不然z-index不起作用。opacity: 透明度来设置 ，哎呀，背景图片变透明了，但是文字也一起透明，很不好看。::before伪元素 设置。
css实现背景半透明文字不透明的效果
祈澈菇凉
05-07 954
图片.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;
完全纯css实现div自适应居中兼容IE7 Chrome FireFox
12-13
2. IE7、8 下rgba属性会失效，所以如果要做半透明要新加一个div，这个步骤我偷个懒就省了哈哈，重点是中间的div大笑 3. 对于弹出层，各位针对自己的情况设置z-index，这里我没有设置了 4. IE6没有测试，抱歉= = ...
CSS 半透明度设置归纳总结[Firefox,IE,Chrome,Safari]
09-25
对于Firefox来说，用opacity就能完成透明化设置了，所以上面的-moz-opacity参考一下。
css实现背景半透明文字不透明的效果示例
09-24
本篇文章主要介绍了css实现背景半透明文字不透明的效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html背景半透明 字不变,css实现背景半透明文字不透明的效果示例
weixin_39833454的博客
06-10 261
这篇文章主要介绍了关于css实现背景半透明文字不透明的效果示例，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下本文介绍了css实现背景半透明文字不透明的效果示例，分享给大家，具体如下：效果如下：html{background: #6a8db1;}.aside{background-color:rgba(244,251,251,0.47);border: 1px solid #F...
CSS设置背景透明，文字不透明。
青峰专栏
01-20 1812
background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)都会读懂 */ 参考：http://www.cnblogs.com/PeunZhang/p/4089894.html
css实现背景颜色透明，文字不透明
张营的技术博客
07-29 6814
1.背景颜色用rgba /*CSS*/ .demo{ width: 100px; height: 100px; background: rgba(255,0,0,0.5); color: #000; }这就是背景颜色为红色半透明，文字颜色为黑色不透明的div
图层背景半透明，字体颜色不半透明
韩世雷 程序员专栏
09-22 1559
------------------------------所有都兼容-------------------------------------------------
div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器
热门推荐
zhll3377的专栏
11-08 3万+
IE：外层filter，内层position:relative或absolute。 FF：外层不使用opacity，而用background:rgba()。 New Document #wrapper { background: #369; widt
css背景颜色兼容ie浏览器,div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器...
weixin_35691715的博客
08-04 332
IE：外层filter，内层position:relative或absolute。FF：外层不使用opacity，而用background:rgba()。HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""">NewDocument#wrapper{background:#369;width:300px;height:150px...
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、付费专栏及课程。

余额充值