html中opacity的使用

今天做项目要用到一个层背景透明,层上的内容不透明的效果

结果网上找了半天,没一个靠谱的,

最后倒是被一句话点醒了:纸烧了,纸上面的字也会没了

所以,要设2层遮罩层,看代码:

.dialog_1//内容层
        {
            z-index: 9999999;
            position: absolute;
            background-color: Transparent;//设置背景绝对透明
        }
        .dialog_2//独立的遮罩层(随便放在页面哪里,就一个DIV)
        {
            z-index: 99;
            position: absolute;
            filter: alpha(opacity=90);
            background-color: #fff;
            width: 100%;
            display: none;
            height: 100%;
            top: 0px;
            left: 0px;
            opacity: 0.9;
            -moz-opacity: 0.9;
        }

时间: 2024-10-13 01:48:37

html中opacity的使用的相关文章

CSS中 opacity的设置影响了index(层数)的改变

在使用 opacity 属性来实现页面整体透明的时候,发现了一个问题.如果两个层发生了重叠,使用了 opacity 属性并且属性值小于1的层,会覆盖掉后面的层.于是动手做了个实验,来验证 opacity 的层次. 网页中的层叠规律是这样的:如果两个层都没有定义 position 属性为 absolute 或者 relative 属性,哪个层的HTML代码放在后面,哪个层就显示在上面.如果指定了 position 属性,并且设置了 z-index 属性,谁的值大,谁就在上面. Opacity 属性

在IE中opacity透明度

body{ background: red; opacity: 0.5; filter:alpha(opacity=50); } jQuery: if($.support.opacity == ture){ $('body').css('opacity',0.5); }else{ $('body').css('filter','alpha(opacity=50)'); }

CSS3 RGBA等于RGB加上opacity吗?

在我们前端设计里有两篇教程: CSS3 RGBA colors使用说明 css3中opacity属性学习与实践,他们公别介绍了RGBA,RGB,opacity的用法,这里我们把这三个属性放在一起来考虑:CSS3 RGBA等于RGB加上opacity吗? 请别先回答,我们接下来分析分析. 以前我们经常会碰到这样一个问题,设置了一个div的opacity(透明度)以后,这个div层里的内容也跟着透明了,特别是文字,一透明就离我 们想要的效果差很远了,显示这不是我们需要的.以前我遇风这种情况通常是把透

ios开发之View属性hidden, opaque, alpha, opacity的区别

一.alpha 液晶显示器是由一个个的像素点组成的,每个像素点都可以显示一个由RGBA颜色空间组成的一种色值.其中的A就表示透明度alpha,UIView中alpha是一个浮点值,取值范围0~1.0,表示从完全透明到完全不透明. 1.alpha会影响自己的透明度,同时也会影响subView的透明度. 2.alpha设为空之后,UIView不会从响应者链中移除,仍然可以收到event. 3.更改alpha,默认是有动画效果的,这是因为图层在Cocoa中是由Core Animation中CALaye

VUE2中文文档:进入、离开和列表过度

进入.离开和列表的过渡 概述 当从 DOM 中插入.更新或移除项目时,Vue 提供多种应用过渡效果的方式.包括以下工具: 在 CSS 过渡和动画中自动处理 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 单元素/组件的过渡 Vue 提供了 transition 外层包裹容器组件(wrapper component),可以给下列情形

css常用效果总结

css有不少常用的效果,你在平时浏览网站的时候可能会看到,但是真的要自己写的时候,有时候会突然忘记,今天稍微对那些常见的效果做一下小结. 1.每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功能. 代码如下: html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -m

理解CSS前景色和透明度

前面的话 颜色的出现让网页不再只是黑白,运用好颜色设计,能让网页增色不少.一个网页给人们留下的第一印象实际上就是它的整体颜色.关于如何设置颜色,请移步CSS的6种颜色模式.实际上,颜色的应用主要分为前景色.背景色和透明三个部分.本文主要介绍前景色和透明度. color前景色 值: <color> | inherit 初始值: 用户代理特定的值 应用于: 所有元素 继承性: 有 [影响边框] 一般来说,前景是元素的文本,不过前景还包括元素周围的边框.有两种方式直接影响一个元素的前景色,可以使用c

CSS 3学习——transition 过渡

以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡transitions 通常情况下,当CSS属性发生改变时,对应元素的CSS属性值立即从旧值变为新值,渲染结果也是立即更新.这部分介绍一种方法,可以通过使用新的CSS属性指定过渡的过程.这些新属性让元素以平滑动画的形式逐渐地从旧状态过渡到新状态. 比如,假设一个元素的left属性和backgroun

Unity3D游戏开发 地形系统(四)

http://mahaile.blog.51cto.com/2891586/771167 上一章我们讲解了 如何创建一个简单的游戏世界 这一章我们来 看看unity3d中的地形系统 废话少说 赶紧开始吧,,哈哈   首先创建一个新的场景    点击菜单栏中的 Terrain-> create Terrain 菜单       完成后如 下图       创建地形系统的时候 unity会按默认的 宽高 图像分辨率,纹理分辨率 等创建一个地形  不过不怕 这些我们都可以修改滴    如果需要在gam