CSS实现半透明div层的方法

很不错的CSS透明效果,本实例是用CSS控制外层DIV不透明,而内层DIV透明,这样实现的效果是意想不到的,还不错吧,其实代码也是很简单的,也很好理解,主要是用了CSS的滤镜。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>半透明div</title>
<style>
#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);}
#div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff; }
</style>
</head>
<body>
<div id="div1">
<div style="padding:20px;"><div id="div2">这里是透明的DIV</div></div>
</div>
</body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403688.shtml

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

相关文章

bootstrap .navbar-header 控制button隐藏/显示

bootstrap 的导航条标签做的很完美&#xff01;我们用这个标签主要解决手机端和PC端适配的问题&#xff0c;结果复制过来不能用。。 检查&#xff1a;是否引入bootstrap.css js; 再重点检查有没有下面这行代码。 <meta name"viewport" content"widthdevi…

“Content type ‘application/x-www-form-urlencoded;charset=UTF-8‘ not supported“解决方法

项目接口返回 code: 500 data: null message: “Content type ‘application/x-www-form-urlencoded;charsetUTF-8’ not supported” 原因在于&#xff0c;接口不支持application/x-www-form-urlencoded;charsetUTF-8 通过看swagger的接口传递数据类型来修改&#xff0c; 将…

新建第一个windows服务(Windows Service)

首先&#xff0c;请原谅我是一个小白&#xff0c;一直到前段时间才在工作需要的情况下写了第一个windows服务。首先说一下为什么写这个windows服务吧&#xff0c;也就是什么需求要我来写这么一个东西。公司的项目中&#xff0c;需要一个预警功能&#xff08;从数据库里取出需要…

Python获取电脑硬件信息及状态的实现方法

From: http://www.jb51.net/article/54470.htm 这篇文章主要介绍了Python获取电脑硬件信息及状态的实现方法,是一个很实用的技巧,需要的朋友可以参考下本文以实例形式展示了Python获取电脑硬件信息及状态的实现方法&#xff0c;是Python程序设计中很有实用价值的技巧。分享给大…

通过类或ID记录上一个被选中的标签或者数字

通过类或ID记录上一个被选中的标签或者数字 $(function () {$(document).on(click, .navbar-nav li a, function (e) {var $parant $(.navbar-nav li).index($(.navbar-nav li.active))var $index $(.navbar-nav li a).index(this)console.log($parant,$index);})})

windows2008下配置iis时出现错误“由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。如果应下载文件,请添加 MIME 映射。”...

iis7配置php的时候配置完后可以访问php页面&#xff0c;但是重启后就出现403&#xff0c;“由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本&#xff0c;请添加处理程序。如果应下载文件&#xff0c;请添加 MIME 映射。” 检查后发现cgi.exe处于禁用状态&…

Windows PowerShell安装指定版本vue/cli脚手架失效解决办法;vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue

mac搭建vue项目看这篇 打开shift——鼠标右键&#xff0c;就可以打开Windows PowerShell 1.安装vue/cli npm install -g vue/cli3.12.0 后面是版本号 2.安装完成后查看 使用过 vue -V 查看vue/cli版本号 &#xff08;如果查看找不到版本&#xff0c;使用命令行创建项目vue …

android图片压缩上传系列-基础篇

开发中遇到需要上传图片的场景还是很常见的&#xff0c;这就涉及到图片的压缩处理。如果不进行压缩&#xff0c;势必造成消耗大量的流量&#xff0c;下载图片的速度慢等。 关于android如何压缩&#xff0c;网上的资料也是很多&#xff0c;但大多数都是代码片段&#xff0c;讲解…

openfire 的配置文件

eclipse 编译openfire&#xff0c;openfire 的配置文件在 openfire\target\openfire\conf\openfire.xml 中&#xff0c; <?xml version"1.0" encoding"UTF-8" ?> - <!-- This file stores bootstrap properties needed by Openfire.Proper…

jq轮播原理及实现

直接开始&#xff0c;HTML CSS部分没备注&#xff0c;JS有 HTML部分 <div style"overflow: hidden;position: relative;left: 0;top: 0;height: 450px;width: 100%"><div id"slider"><div></div><div></div><div…

使用python获取CPU和内存信息的思路与实现(linux系统)

From: http://blog.csdn.net/preterhuman_peak/article/details/40649229 linux里一切皆为文件&#xff0c;在linux/unix的根目录下&#xff0c;有个/proc目录&#xff0c;这个/proc 是一种内核和内核模块用来向进程&#xff08;process&#xff09;发送信息的机制&#xff08…

uni.request接口封装;小程序uni-app接口封装

另一篇请求接口简单封装在api下的index.js 本片资源下载地址 本片封装了post get put请求&#xff0c;重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request()请求 注意 &#xff1a;需要根据自己接口的 statusCode 状态码 、数据状态码…

php 功能函数集

1.获取页面闭合带id标签数据 View Code 1 <?php2 header("Content-type: text/html; charsetutf-8"); 3 /**4 * $tag_id HTML tag_id like id"abc"5 * $url web url6 * $tag HTML tag7 * $data HTML data if…

JS prototype作用

prototype可查看原型属性&#xff0c;还可对原型添加属性或方法 function Car(name) {this.name name;this.run function () {console.log(this.heightcm this.name is run!)}}var dazhong new Car(dazhong);Car.prototype.height null; //给对象添加新属性…

高性能并发TCP网络服务-IOCP框架修正VC2008版本

From: http://blog.csdn.net/lsfa1234/article/details/6223635 高性能并发TCP网络服务IOCP框架修正VC2008版本 从Source Code里可发现&#xff0c;此工程整合的epoll&#xff0c;iocp及kqueue三种模型&#xff0c;应该是非常有用的一个东东&#xff08;如果ACE能够把它的那些…

解决uni-app小程序图片转base64;微信小程序上传图片转base64;

base64转微信小程序图片 点击看这篇 以下是小程序图片转base64&#xff1a; uni.chooseImage({count: 6, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图&#xff0c;默认二者都有sourceType: [album], //从相册选择success: function (res) {console…

java中byte转换int时为何与0xff进行与运算

另一篇分析如下&#xff1a; byte为什么要与上0xff&#xff1f; 在剖析该问题前请看如下代码 public static String bytes2HexString(byte[] b) {String ret "";for (int i 0; i < b.length; i) {String hex Integer.toHexString(b[ i ] & 0xFF);if (hex.l…

element 增加自由验证

<el-form-item label"社会统一信用代码" prop"socialCode"><el-input v-model"ruleForm.socialCode"></el-input></el-form-item> 主要是validator返回的是对象 rules: {socialCode: [ //社会统一信用代码{requir…

ADempiere 360LTS 地址(Address)的中国格式定制

地址(Address)的中国格式定制AD里面设置合作伙伴&#xff0c;仓库等需要输入地址的地方&#xff0c;目前都是按照美国的习惯&#xff0c;即使国家选择了中国&#xff0c;还是不符合国内习惯&#xff0c;下面通过配置可使地址按照&#xff1a;省、市、详细地址的格式显示1) 国家…

git 配置免密登陆

SSH免密码登录配置 注意&#xff1a;这些命令需要在git bash here中敲 注意先配置好账户名和邮箱 # git config user.name zhangsan # git config user.email zhangsanqq.com # 使用–global参数&#xff0c;配置全局的用户名和邮箱&#xff0c;只需要配置一次即可。推荐配置…