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

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

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://www.mzph.cn/news/448144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

加速时如何换挡

加速时如何换挡&#xff0c;您知道吗?为了使换挡过程顺利进行&#xff0c;变速器内齿轮平稳啮合&#xff0c;必须掌握好发动机转速&#xff0c;在适当时机推动变速杆操纵齿轮啮合。为此&#xff0c;要通过反复练习&#xff0c;一边踩踏油门踏板&#xff0c;一边听发动机运转声…

vue 项目 引用(外部) js、css

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 我的工程结构&#xff1a; 1. 引入 css 有 2 种方式&#xff1a; 方式 1 <script type"text/javascript">import .…

自动挡车挡位的基本知识介绍

一般来说&#xff0c;自动档汽车的自动变速器的档位分为P、R、N、D、2 (或S)、L(或1)等。下面分别详细介绍如下&#xff1a; P (Parking) 停车档&#xff0c;或称泊车档&#xff1a; P用作停车之用&#xff0c;它是利用机械装置去锁紧汽车的转动部分&#xff0c;使汽车不能移动…

解决:(iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8082 -j DNAT --to-destin

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 用 docker 部署一个前端工程&#xff0c;run 后容器有了&#xff0c;却不是运行状态&#xff0c;是创建状态&#xff0c;于是我执行 …

无损压缩——Huffman编码

最近项目中涉及到人脸关键点中神经网络的压缩&#xff0c;采用了性能较好的哈夫曼编码进行。 源码地址&#xff1a;https://github.com/believeszw/HuffmanCompress 1 引言 哈夫曼&#xff08;Huffman&#xff09;编码算法是基于二叉树构建编码压缩结构的&#xff0c;它是数据…

26条安全开车经验 开车20年老司机分享

总有些人&#xff0c;觉得自己开车技术比舒马赫牛叉&#xff0c;市区高速漂移无比潇洒。也总有些人&#xff0c;觉得路是自家的铺的&#xff0c;爱怎么开就怎么开&#xff0c;爱停哪就停哪&#xff0c;哪个不服打开车窗就是一句国骂一个中指。其实他们都没有意识到&#xff0c;…

解决:Request header field Content-Type is not allowed by Access-Control-Allow-Headers

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 前端 vue 工程 post 请求后端接口&#xff0c;报错&#xff1a; Request header field Content-Type is not allowed by Access-Con…

书写README的各种markdown语法

README 该文件用来测试和展示书写README的各种markdown语法。GitHub的markdown语法在标准的markdown语法基础上做了扩充&#xff0c;称之为GitHub Flavored Markdown。简称GFM&#xff0c;GFM在GitHub上有广泛应用&#xff0c;除了README文件外&#xff0c;issues和wiki均支持…

Apache2.4配置ssl

1》验站 如下截图&#xff0c;验站就是在DNS域名商哪里&#xff0c;在对应host下面&#xff0c;添加一个TXT记录类型&#xff0c;主机记录&#xff0c;记录值后&#xff0c;检测即可。   2》SSL证书申请 阿里云&#xff0c;腾讯云有很多免费证书申请&#xff0c;免费的缺点是…

助你解决新手开车四大问题 为您支招

新手开车起步技巧涉及方方面面&#xff0c;对于新手来说&#xff0c;如何首次将车独自开上路且不发生任何意外是众多人热切盼望的理想方式。但是新手上路难免会磕磕碰碰&#xff0c;发生小摩擦都是在所难免的&#xff0c;那么如何在起步阶段就将发生事故的概率降到最低呢?在此…

VUE - get 、post 请求后端接口:get 、post 写法 (Axios 中文说明文档地址)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Axios 中文使用说明文档地址&#xff1a;Axiox 中文说明文档 我只是记录下写法&#xff0c;两种请求都能正常运行&#xff1a; 1. 安装…

离合器半联动点的判断和技巧 为您支招

现在将离合器半联动的使用方法揭密如下&#xff1a;将离合器抬到车开始动时你就别再抬了&#xff0c;你如果感觉到车有些快了&#xff0c;可再往下踩些&#xff0c;你如果感觉到车有些慢了&#xff0c;可再往起抬些&#xff0c;这样可将车速控制在你想要的速度范围之内。 ● 坡…

VUE:组件间相互跳转、页面带参跳转

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 只是记录下用法&#xff1a; 从 A 页面跳转到 B 页面。 如下写法&#xff1a; A 页面跳转方式&#xff1a; 代码&#xff1a; getdat…

如何调整反光镜和座椅的位置 为您支招

【太平洋汽车网 学车频道】首先要进行座椅的高度调整&#xff0c;上下调整座椅让头部离车顶至少还有一拳的距离。如果座椅调得太高&#xff0c;车辆在颠簸时头部容易碰到车顶&#xff0c;调得太矮了又会影响视线。然后是前后距离的调整&#xff0c;当脚踩住制动踏板至最深处时…

关于hexo与github使用过程中的问题与笔记

快速阅读 如何用github 和hexo 创建一个blog 1.github中要新建一个与用户名同一样的仓库&#xff0c; 如:homehe.github.io - 必须是io后缀。一个帐户 只能建立一个2. 绑定域名 &#xff0c; A记录指向ip, cname记录指向homehe.github.io 3. 配置sshkey - 个人设置 -> SSH a…

CSS 中 的 margin、border、padding 区别 (内边距、外边距)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 图解CSS padding、margin、border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中&#xff0c;设计师可以通过创建定义来控制这…

什么是转向灯?使用转向灯有何技巧?

什么是转向灯&#xff1f;如何使用转向灯&#xff1f;新手司机对车辆还不是很熟悉&#xff0c;如何正确使用转向灯&#xff0c;尤其是在不同路段中该怎么正确使用转向灯&#xff0c;成为了很多新手们的困扰之一&#xff0c;今天我们就来为大家解决这个问题吧&#xff01; 转向灯…

集合练习:登录注册功能

需求&#xff1a; 1、登录账号唯一&#xff0c;在注册时验证输入的账号是否可用&#xff0c;若已存在&#xff0c;则不可用&#xff0c;若不存在则可用2、登录时使用账号密码进行验证1 /**2 * author Administrator3 * 登录信息 4 */5 public class UserLogin {6 …

vue 通信、传值的多种方式(超详细)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件&#xff08;触发事件可以是点击事件、钩子函数等&am…

新手开车 驾驶小秘诀要牢记

有很多人刚买到新车兴奋异常&#xff0c;凭着并不熟练的驾驶技术&#xff0c;过了几天的车瘾后发现&#xff0c;刚买的车怎么出现了这样那样的问题 有很多人刚买到新车兴奋异常&#xff0c;凭着并不熟练的驾驶技术&#xff0c;过了几天的车瘾后发现&#xff0c;刚买的车怎么出现…