兼容所有浏览器背景半透明 文字不透明

最新推荐文章于 2022-09-14 20:08:51 发布
最新推荐文章于 2022-09-14 20:08:51 发布
阅读量385 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tryhot/article/details/9496285
版权
<!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>兼容所有浏览器背景半透明文字不透明</title>
<head>
<style >
* {margin:0;padding:0;}
.Boxer {width:600px;height:400px;overflow:hidden;margin:0 auto;border:6px solid red; background:#000}
.Opacity {
height:400px;
background-color:rgba(255,0,0,0.5); 
_background-color:#f00;      /*IE6 系列*/
*background-color:#f00;      /*IE7 系列*/
filter:alpha(opacity=50);   


}
.BoxerInner {position:relative;  /*IE 系列*/text-align:center;font-size:24px;font-weight:700;}
</style>
<!--[if IE 8]> 
<style type="text/css">
.Opacity {background-color:#f00; 

filter:alpha(opacity=50);   

}

</style>
<![endif]-->
<!--[if IE 9]> 
<style>
.Opacity {background-color:#f00;     
filter:alpha(opacity=50); }  
</style>
<![endif]-->
</head>
<body >
<div class="Boxer">
<div class="Opacity">
<span class="BoxerInner">BoxerInner</span>
</div>
</div>
</body>
</html>
tryhot
关注
html中的文字透明背景图片,利用css实现背景透明和文字不透明效果汇总
weixin_32083393的博客
06-30 2687
在项目开发过程中，透明和不透明样式的使用很早就开始流行了。到现在已经是大家非常熟悉的效果了，透明效果不仅仅是对图片，还有各种地方都有使用到，用CSS也可以非常简单的实现各种浏览器的兼容设置。有时候经常会用到背景图上放一些文字介绍，需要有背景图片透明而文字不透明的效果。下面章节的内容我们就来说一说利用css来实现背景图片透明而文字不透明效果。背景透明和文字不透明效果1. 用CSS实现背景图片透明而文...
纯CSS实现背景半透明文字不透明效果兼容IE6
09-25
总结起来，要实现背景半透明而文字不透明的效果并兼容IE6，可以结合使用rgba和滤镜属性。首先利用rgba属性为非IE浏览器设置背景透明度，然后对IE6使用DXImageTransform.Microsoft.gradient滤镜，最后通过`:root....
兼容所有浏览器的背景半透明方式
For The Future
07-18 1213
#testdiv { background-color:#FFF; background-color:rgba(255,255,255,0.7); filter: Alpha(Opacity=70); } 注：对于ie8以下的版本会使得#testdiv中的控件也半透明，而对于其他浏览器则是显示正常。
5. 背景半透明 元素不透明（兼容所有浏览器）
weixin_30551963的博客
07-09 72
background-color: rgba(0, 0, 0, 0.5);　　　　// 支持IE9+等现代浏览器 IE滤镜 — 用以解决IE6-8的rgba不支持问题 filter: progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled, gradientType=1 || 0, startColorstr=#7f000000,...
GTK环境部署
天然玩家的博客
07-10 1195
1 概念 1.0 GTK GTK或GIMP ToolKit是用于生成交互界面的多平台工具库。该工具库提供完整的开发组件，GTK适用于从小型一次性工具到完整应用程序项目开发。GTK是跨平台并且API及其易用，可提高开发速度。虽然GTK使用C语言开发，但是其支持多语言应用不仅限于C/C++开发，如Perl和Python语言即可实现快速开发。GTK是GNU项目且是免费的，GTK授权组织GNU LPL允许...
美化你的Xfce桌面
热门推荐
alfiy的专栏
09-14 1万+
Xfce的鼎鼎大名你是不是早有耳闻了？Xfce是一个很好的轻量级桌面环境，占用系统资源少是他的优点，你可能会在一些嵌入式系统中见到他的身影，但他也有一个缺点，那就是默认的界面看起来有点旧。但这是不Xfce的错，只要你发扬点DIY的精神，你的Xfce桌面看起来也会酷酷的。要美化Xfce桌面你首先需要有一个拥有Xfce的Linux系统，我还是在我的Arch Linux上继续我的操作，如果你还不清楚Arch Linux如何安装配置的话请看我前面的博文。默认的Xfce桌面是下面这个样子的。美化后的Xfce。
【GTK3.0】背景设置
编程世界
01-05 274
由于GTK 3.0将许多GTK 2.0的API都丢弃，转到GTK 3.0下编译后有些不适应，所以感觉能在GTK 3.0下调试成功这个Demo还是很成功的。 源码 #include &lt;gtk/gtk.h&gt; int main( int argc, char *argv[]) { GtkWidget *window; ...
背景透明，文字不透明的解决方案
09-28 316
在写项目的时候，会经常遇到这种需求，如图： 背景半透明，文字正常显示你看到之后会有什么样的解决方案呢？思考一会儿。假设你思考了，可以看看和我的方法的区别，对比一下优劣，相互交流一下。 有的童鞋可能会随口说出opacity:50%; 这种可能会遇到坑哦；而opacity的坑主要在于按照上边的HTML代码结构设置父元素opacity：0.5；会发现作为子元素的文字也变...
背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
09-25
这篇文章主要探讨了如何在兼容IE浏览器的同时，实现背景黑色且透明度为0.5，而文字保持不透明的最佳方法。 首先，对于非IE浏览器，我们可以利用CSS3的rgba()函数来设置背景颜色和透明度。rgba()函数的格式是`rgba...
CSS实现背景透明文字不透明兼容各种浏览器有图有真相
09-25
本文将介绍如何使用CSS来实现背景透明、文字不透明，并且兼容包括IE6在内的各种主流浏览器。 首先，我们来看一下基本的CSS语法。在现代浏览器中，我们可以利用`rgba()`函数来设置元素的背景透明度。`rgba()`函数...
css背景色透明 内容不透明的解决方法(兼容所有浏览器)
09-25
为了实现背景透明，内容不透明，`.img_wrap`和`#bos ul li`设置了白色背景，而`<h2>`则使用了`rgba()`和`filter`相结合的方式，创建了一个半透明的黑色背景。这样，即使背景透明，标题文字依然清晰可见。 在实际...
CSS代码实现背景透明而文字不透明
04-30
总的来说，实现CSS背景透明而文字不透明的方法有多种，关键在于理解各种CSS属性和技巧的兼容性，以及如何根据浏览器特性选择合适的方法。通过灵活运用 rgba()、opacity、filter 和渐变等工具，我们可以创建出既美观...
c#实现俄罗斯方块，面向对象实现
09-15
俄罗斯方块（Tetris）是一款经典的益智游戏，由俄罗斯程序员阿列克谢·帕基特诺夫于1984年开发。游戏的主要目标是通过旋转和移动不同形状的方块（称为“砖块”或“Tetrominoes”），将它们填充到屏幕底部的水平行中。当一行被完全填满时，该行会消失，玩家将获得积分。 游戏特点： 砖块形状：游戏中有七种不同形状的砖块，每种砖块由四个方块组成。 下落机制：砖块从屏幕顶部逐渐下落，玩家需要快速做出决策。 得分系统：消除的行越多，得分越高，连续消除多行会获得额外分数。 难度递增：随着游戏进行，砖块下落的速度会逐渐加快，增加了游戏的挑战性。 文化影响： 俄罗斯方块不仅在游戏界取得了巨大的成功，还成为了流行文化的一部分，影响了许多后续的游戏设计。它的简单性和上瘾性使其成为了历史上最畅销的电子游戏之一。 版本与平台： 自发布以来，俄罗斯方块已经在多个平台上推出，包括家用游戏机、电脑、手机等，形成了众多不同的版本和变种。
5G网络优化案例：关于解决诺基亚5G 700M站点小区闪断问题解决.pdf
09-15
这份文件是关于解决诺基亚5G 700M站点小区闪断问题的详细案例报告，主要内容和关键要点如下： 问题背景与初步分析： 问题描述：随着5G 700M网络建设的推进，诺基亚700M现网出现较多误码告警和小区闪断问题，故障比例明显高于其他厂家站点。 初步定位：通过归类法分析，发现绝大部分误码问题发生在烽火单芯双向光模块小区，占比高达95.65%。 故障根因深入探究： 光模块适配问题：初步认为烽火单纤双向光模块存在问题，但更换后问题依旧，进一步分析为光模块与诺基亚设备的适配问题。 深入测试与定位：选取5个长期误码小区进行深入分析，与烽火厂家合作对光模块进行程序升级，问题得到初步解决。 AUTOBYPASS机制分析： 机制介绍：烽火光模块采用25G模块速率兼容10G，并开启AUTOBYPASS（CPR自动旁路模式）功能。 影响分析：AUTOBYPASS机制与诺基亚设备不适配，导致交互失败和误码产生。关闭AUTOBYPASS后，CDR时钟校验和恢复周期缩短，交互频繁，误码问题消失。 解决方案与实施： 解决方案：针对所有使用此类光模块的诺基亚站点，通过优化升级烽火光模块，关闭AUTOBYPASS功
在线请假管理系统.zip
09-15
这是一个基于Python Flask的Web应用程序，采用Bulma uI框架和Postgresql数据库，用于管理和处理员工的请假事宜。用户可以通过这个系统创建安全的用户账户并登录，员工可以提交请假申请等待上级审批，并查看历史请假记录。经理可以审批或拒绝员工的请假申请，并查看团队的请假记录。此外，管理员还可以查看所有员工信息，添加新员工并分配经理，编辑和删除员工信息。该项目在heroku上托管，提供在线服务。安装步骤包括克隆项目、创建虚拟环境、激活环境并安装依赖项等。还提供了数据库迁移和初始化、运行应用程序以及数据重置等实用工具命令。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.文md件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
performance-timing.js利用HTML5的navigation_timing_API_performance
最新发布
09-15
performance-timing.js利用HTML5的navigation_timing_API_performance-timing
ssm+mysql的小说阅读网站书城（源码+lw+ppt）
09-15
内容概要： 基于SSM框架、Java语言和MySQL数据库的小说网站。系统旨在为用户提供一个在线阅读和搜索小说的平台，支持用户注册、小说列表查看、在线支付和排行榜等功能。系统采用B/S架构，前端使用JS语言进行界面设计，后端通过SSM框架进行开发。 适用人群： 本系统适用于广大网络小说读者、作者和出版社。 使用场景及目标： 1. 读者可以通过系统在线阅读小说，搜索自己喜欢的作品。 2. 作者可以上传自己的作品，与读者互动。 3. 出版社可以通过系统发布和管理小说资源。 其它说明： 系统设计考虑了用户友好性和操作便捷性，通过技术手段确保数据安全性。系统具备良好的扩展性，可适应未来功能升级需求。通过本系统，用户可以方便地获取所需小说资源，同时作者和出版社也能有效地管理自己的作品。 关键词：小说网站；MYSQL数据库；SSM框架；JS技术
8.zabbix构建企业级监控告警平台(1).学习笔记整理分享给需要的同学
09-15
8.zabbix构建企业级监控告警平台(1).学习笔记整理分享给需要的同学
CSS3实现透明背景与不透明文字效果
"本文将介绍如何使用CSS3来实现背景透明但文字保持不透明的效果，以满足在图片上展示带有半透明背景文字的需求。通过一个实际的示例代码，我们将探讨如何利用CSS3的特性来达成这一目的。" 在Web设计中，有时候我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值