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,一经查实,立即删除!

相关文章

node 安装 webpack

首先要安装 Node.js&#xff0c; Node.js 自带了软件包管理器 npm&#xff0c;Webpack 需要 Node.js v0.6 以上支持&#xff0c;建议使用最新版 Node.js。 用 npm 安装 Webpack&#xff1a; $ npm install webpack -g此时 Webpack 已经安装到了全局环境下&#xff0c;可以通过命…

Thinking in C++遇到的函数指针及应用

// // Created by PC-Saw on 2019/1/24. //#include <iostream>#define TEST 2/* 1. */ typedef int* (*(*fp1)(int))[10]; // 首先是一个函数指针&#xff0c;接受一个int型参数&#xff0c;返回一个指向10个int指针数组的指针 /* 2. */ typedef i…

html 标签内背景图片自适应 div 大小

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 只需通过css设置background-size属性为contain&#xff0c;即 background-size:contain 注意&#xff1a;一定要在先设置background之…

Code Project精彩系列(转)

Code Project精彩系列&#xff08;转&#xff09; Applications Crafting a C# forms Editor From scratch http://www.codeproject.com/csharp/SharpFormEditorDemo.asp 建立一个类似C#的环境, 实现控件拖拉&#xff0c;属性 Packet Capture and Analayzer 网络封包截获 http…

加速时如何换挡

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

C++ 学习杂谈:sizeof和sizeof(string)的问题

最近遇到一个令我困惑的问题&#xff0c;就是 sizeof&#xff08;string&#xff09;的值&#xff0c;之前在vs2010上测得是固定28&#xff0c;最近在用CLion&#xff0c;上面测得是4&#xff0c;出现了不一样的结果&#xff0c;我又在vs2013上试了一下&#xff0c;结果又不一样…

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

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

FAQ:Container Classes篇

1、Why should I use container classes rather than simple arrays?&#xff08;为什么应该使用容器类而不是简单的数组&#xff1f;&#xff09; In terms of time and space, a contiguous array of any kind is just about the optimal construct for accessing a sequen…

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

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

Java 强引用、弱引用、软引用、虚引用

1、强引用&#xff08;StrongReference&#xff09; 强引用是使用最普遍的引用。如果一个对象具有强引用&#xff0c;那垃圾回收器绝不会回收它。如下&#xff1a; Object onew Object(); // 强引用 当内存空间不足&#xff0c;Java虚拟机宁愿抛出OutOfMemoryError错误…

解决:(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;于是我执行 …

在DOS命令行执行MYSQL语句

最近有个工作需要从MSSQL库中取数据然后导入SQL 2005。由于之前曾经做过利用BCP导入SQL&#xff0c;因此想借助这个工具实现此功能。 在探索过程中&#xff0c;好像发现MYSQL不能想SQL那样有OSSQL这样的外部命令。因此想到利用MYSQL执行文件内容的功能来生成导出数据。&#xf…

无损压缩——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. 安装…

C++11新特性——移动语义,右值引用

移动语义 有一些类的资源是__不可共享__的&#xff0c;这种类型的对象可以被移动但不能被拷贝&#xff0c;如&#xff1a;IO 或 unique_ptr 库容器、string 和 shared_ptr 支持拷贝和移动&#xff0c;IO 和 unique_ptr 则只能移动不能拷贝。。 右值引用 右值引用是必须绑定到…