DIV 半透明层、 CSS实现网页 背景半透明

article/2025/9/3 1:12:04

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

DIV半透明实现,使用CSS实现DIV成半透明效果,CSS实现层与背景半透明效果。

一、DIV CSS半透明基础介绍   -   

设置DIV半透明CSS代码:

div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 

说明:
1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认
2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50%
3、opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明

为了观察到对DIV半透明实现,我们设置两个DIV层,分别一个放于另外一个DIV层内,外层DIV命名为“.div-a”;上面被包含的层CSS类命名为“.div-b”,形成“.div-b”盒子放于“.div-a”内

我们对底层DIV设置一个背景是一张图片,上面的DIV盒子设置村黑色。

二、未设置半透明样式实例   -   

1、根据描述实例,未设置半透明HTML源代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>半透明实例在线演示 www.divcss5.com</title> 
<style> 
.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;} 
.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00} 
</style> 
</head> <body> 
<div class="div-a"> 
<div class="div-b">DIV半透明实例演示</div> 
</div> 
</body> 
</html> 

2、未设置半透明CSS样式截图:

未设置半透明时截图
未设置半透明样式 未实现半透明实例浏览器中效果截图

三、对DIV设置CSS半透明样式实例   -   

1、我们对“.div-b”选择器加入半透明样式代码:

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6; 
设置60%半透明效果

完整实例网页HTML代码如下:

2、在浏览器效果截图:

css div半透明实现截图
css+div实现半透明 浏览器中浏览实现DIV半透明效果截图

总结:根据以上两个实例,第一个没有设置半透明样式,另外一个设置半透明样式而实现了div层半透明效果,大家可以根据需要调整半透明值,实现想要半透明度。设置半透明效果要考虑IE浏览器、谷歌、火狐等浏览器兼容支持,所以我们半透明样式代码务必完整。

再次记住需要半透明地方设置以下半透明代码即可:

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6 

 

转自:http://www.divcss5.com/css-hack/c574.shtml


http://chatgpt.dhexx.cn/article/c6vvgVYb.shtml

相关文章

html div背景半透,css半透明背景实现方法

这里博主介绍2种办法。 第一种用背景图的方式&#xff1a; 代码如下html>半透明实例-琅枫个人博客 .div1{width:300px; height:200px; background:url(http://www.phpfeng.cn/statics/assets/i/b1.jpg);} .div2{width:300px; height:50px; background:rgba(0,0,0,0.5); colo…

html前端小技巧—div半透明设置技巧

今天分享下”html前端小技巧—div半透明设置技巧“这篇文章&#xff0c;文中根据实例编码详细介绍&#xff0c;或许对大家的编程之路有着一定的参考空间与使用价值&#xff0c;需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 代码如下: <!DOCTYPE html PUBLIC "-…

html半透明遮罩,div半透明遮罩效果

css如何实现鼠标移至图片上显示遮罩层及文字 1.首先看看HTML、一个img图像控件和一个带掩码样式的div&#xff0c;其中包含文本。这是蒙版层。 2.然后&#xff0c;查看样式定义。首先&#xff0c;查看图像容器和图像的样式&#xff0c;如图所示。这主要是准备我们的绝对定位口罩…

css让div背景变成半透明

方法一: {opacity: 0.4; }但是这个会让内容也变透明 肯定是不行的 这时候我们用另外一种方法 {background-color:rgba(0,0,0,0.3); }

【HTML&CSS】如何设置透明的div盒子?

有时候我们想把盒子的背景设置成透明的&#xff0c;或者半透明的&#xff0c;看起来更美观。这就需要我们给颜色加一个透明度。 方法一&#xff1a;直接使用‘background&#xff1a;rgba&#xff08;R,G,B,A&#xff09;’来设置透明的背景&#xff0c;第四个alpha值代表透明…

设置div半透明

DIV半透明实现&#xff0c;使用CSS实现DIV成半透明效果&#xff0c;CSS实现层与背景半透明效果。 一、DIV CSS半透明基础介绍 - TOP 设置DIV半透明CSS代码&#xff1a; div{filter:alpha(Opacity80);-moz-opacity:0.5;opacity: 0.5;} 说明&#xff1a; 1、filter&#xff…

mysql 笛卡尔乘积

笛卡尔乘积是由笛卡尔发现的这种现象&#xff0c;在数学中指集合A、B的结果集&#xff1b; 在mysql中指X、Y表的所有集合。 语法&#xff1a;select 查询列表&#xff0c;查询列表 from 表1&#xff0c;表2…

数据库连接与笛卡尔乘积

一、笛卡尔乘积与数据库连接(join) 数据库连接是从两个关系的笛卡尔乘积中选取属性间满足一定条件的元组。 现有两个关系R、S: 关系R&#xff1a; 关系S&#xff1a; 关系R与S的笛卡尔乘积为&#xff1a; 在连接中有两种非常重要的连接&#xff1a;等值连接与自然连接。 等…

笛卡尔乘积与数据库连接(join)

一、笛卡尔乘积与数据库连接(join) 数据库连接是从两个关系的笛卡尔乘积中选取属性间满足一定条件的元组。 现有两个关系R、S: 关系R&#xff1a; 关系S&#xff1a; 关系R与S的笛卡尔乘积为&#xff1a; 在连接中有两种非常重要的连接&#xff1a;等值连接与自然连接。 等…

如何用javascript实现笛卡尔乘积?

笛卡尔乘积是指在数学中&#xff0c;两个集合X和Y的笛卡尓积&#xff0c;又称直积&#xff0c;表示为X Y&#xff0c;第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员 。 例子 假设集合A{a, b}&#xff0c;集合B{0, 1, 2}&#xff0c;则两个集合的笛卡尔…

连接查询——笛卡尔乘积

连接查询 概要 含义&#xff1a;又称多表查询&#xff0c;当查询的字段来自于多个表时&#xff0c;就会用到连接笛卡尔乘积现象&#xff1a;表1 有m行&#xff0c;表2 有n行&#xff0c;结果m*n行 发生原因&#xff1a;没有有效的连接条件如何避免&#xff1a;添加有效的连接…

python求乘积_Python实现求笛卡尔乘积的方法

Python实现求笛卡尔乘积的方法 本文实例讲述了Python实现求笛卡尔乘积的方法。分享给大家供大家参考,具体如下: 在数学中,两个集合X和Y的笛卡尓乘积(Cartesian product),又称直积,表示为X Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员。假设…

启动系统服务,错误1053:服务没有及时响应启动或控制请求

原因分析&#xff1a; 一般由于超时设置导致的 解决方法&#xff1a; 进入 注册表&#xff1a; 方法一&#xff1a;开始 >>> 运行 >>> 输入 regedit >>> 确定 方法二&#xff1a;winR >>> 输入 regedit >>> 确定 单击开始&…

Windows服务没有及时响应启动或控制请求

编写好的一个Windows服务程序&#xff0c;在本地测试正常&#xff0c;但是放到服务器上出现1053&#xff1a;服务没有及时响应启动或控制请求&#xff0c;如下图所示&#xff1a; 右键我的电脑&#xff0c;选择“管理”&#xff0c;如下图所示&#xff1a; 在打开的服务器管…

使用一段时间,oracle服务在启动时报1053:服务没有及时响应启动或控制请求

题外话&#xff1a; 1、Oracle服务启动顺序&#xff1a;先启动监听器&#xff0c;再启动数据库实例。例如OracleOraHome12TNSListener、OracleOraHome12ManagementServer、OracleServiceORCL 2、Oracle服务关闭顺序&#xff1a;先关闭数据库实例&#xff0c;在关闭监听器 问题…

服务没有及时响应启动或控制请求(本人真实碰到,安装成功)

这是我安装sql server2019出现的错误&#xff0c;经过网上到处踩坑&#xff0c;花了好长时间终于解决了这个问题。&#xff0c;这个错误好像是电脑版本和sql server 2019冲突了&#xff0c;下载sql server2017就行。 解决方法&#xff1a; 首先把安装的sql server2019文件全部卸…

sql服务器没有及时响应或控制请求,sql server发生错误1053服务没有及时响应或控制请求...

错误 1053&#xff1a;服务没有及时响应启动或控制请求 症状 当您停止或暂停托管 Microsoft Windows 服务时&#xff0c;如果该服务停止或暂停过程所花的时间比已配置的时间长&#xff0c;您会收到错误信息 原因 ServiceBase 类直接从 Advapi32.dll 文件的 ScDispatcherLoop 中…

广联达服务器没有及时响应,小编为你作答服务没有及时响应启动或控制请求 【解决步骤】 的详细方法_...

近日有小伙伴发现电脑出现问题了,在突然遇到服务没有及时响应启动或控制请求 时不知所措了,对于服务没有及时响应启动或控制请求 带来的问题,其实很好解决服务没有及时响应启动或控制请求 带来的问题,下面小编跟大家介绍服务没有及时响应启动或控制请求 解决方法: 服务没有…

Windows 无法启动MYSQL80服务 错误1053:服务没有及时响应启动或控制请求

Windows 无法启动MYSQL80服务 错误1053&#xff1a;服务没有及时响应启动或控制请求。 遇到的问题 图片描述 文字描述 Windows 无法启动MYSQL80服务 错误1053&#xff1a;服务没有及时响应启动或控制请求。 出现原因 在安装MySQL的最后一步&#xff0c;配置启动MySQL服务的…

Worke Service 错误 1053: 服务没有及时响应启动或控制请求

本地测试&#xff1a;无问题 服务器测试&#xff1a; 错误 1053: 服务没有及时响应启动或控制请求。(推荐) 解决步骤方法 &#xff1a; 1、Program.cs 2、安装对应的.NET环境&#xff0c;譬如&#xff1a; 就需要安装.net 5.0的sdk(官网去下对应的版本就行) 如果除此之外还是…