opacity 与rgba区别

【opacity 与rgba区别】的更多相关文章

rgba(r,g,b,a) rgba(r,g,b,a) r,g,b分别是颜色r g b的值(0-255),a表示透明度(0-1). opacity: value: opacity: value; value是具体数值,0-1之间 .0:完全透明, 1:完全不透明本以为二者可以互相替换实现效果,但是今日在写页面时发现了区别: opacity 子元素颜色会被影响,即变相的被继承.rgba(r,g,b,a)不会 <div class="mask"> <img sr…

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 200px;/*浏览器默认字体大小16px*/ margin:1em;/*em以父元素字体为基准*/ padding: 1rem;/*rem以根元…

css基础--深入理解opacity和rgba的区别

欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看语法 1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) r为红色值, 正整数 | 百分数 g为绿色值,正整数 | 百分数 b为蓝色值,正整数 | 百分数 a为alpha(透明度),值为0 ~ 1之间的小数, 0.0 (完全透明)到 1.0(完全不透明) 上面的正整数为十进制0 ~ 255之间的任…

rgba()和opacity之间的区别(面试题)

rgba()和opacity之间的区别: 相同点:rgba()和opacity都能实现透明效果: 不同点:opacity作用于元素,以及元素中所有的内容: rgba()只用于于元素的颜色,及背景色: 实例: 对比:…

雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba

一.background-position 雪碧图我们的html和css中有三个属性可以向服务器发送请求:src url href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就请求过来了二.overflow 1.值hidden:超出就隐藏 2.值scrol:出现滚动条 visibility:hidden:可见的(消失但是占用位置) display:none:消失但不占用位置三.title中的小图标 1.如何实现浏览器title中的…

深入了解opacity和rgba

1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) - r为红色值, 正整数 | 百分数 - g为绿色值,正整数 | 百分数 - b为蓝色值,正整数 | 百分数 - a为alpha(透明度),值为0 ~ 1之间的小数, 0.0 (完全透明)到 1.0(完全不透明) - 上面的正整数为十进制0 ~ 255之间的任意值,百分数为0% ~ 100%之间的任意值 2. opacity opacity是一个属性,并非是属性值. 使用方法为:opacity:0~1: 俩者之间最大的区别在于…

opacity与RGBA透明的区别

为什么不使用opacityCSS3 还允许通过opacity 声明来设置元素的透明度.该透明度的值也是一个介于0 到1 之间的小数(如将opacity 设置为0.1 表示为10%透明).但是这种透明度与RGBA 及HSLA 有所不同,这种方式设置的透明度会对整个元素产生影响(元素的内容都会透明).反之,使用HSLA或RGBA 则可以仅让元素的某些部分有透明效果.这样,一个元素可以带有HSLA 透明背景,但内部的文字仍然不透明.…

opacity与rgba

background: rgba(255,255,255,0.6);容器本身透明度变化,它包含的子容器的透明度不变. opacity:0.6;容器及容器包含的子容器的透明度都会发生变化.…

有关opacity或RGBA设置颜色值及元素的透明值

opacity声明来设置元素的透明值,当opacity设置元素的透明值,内部的文字及元素也会透明,通过RGBA设置的颜色值只针对当前元素,内部的文字及元素的透明值并未发生变化 opacity声明来设置元素的透明值(改透明度的值介于0-1之间的小数, 0.5表示50%透明). opacity的特点是:当opacity设置元素的透明值,内部的文字及元素也会透明复制代码代码如下: .demo{ filter:alpha(opacity=30); opacity:0.3; } 注:这段代码cl…

ie6-ie8不支持opacity，rgba解决方法

半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 这里的opacity是百分比的 opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式.也就是说,0代表完全透明,100代表完全不透明. 上面解决了透明度的问题.接下来,解决r…

display:none、visibility:hidden，opacity:0三者区别

1. display:none 设置display:none,让这个元素消失消失不占据原本任何位置连带子元素一起消失元素显示:display:block 2. visibility:hidden 元素消失,只是视觉消失,在页面中实际存在,对布局依然起作用元素显示:visibility:visible 3. opacity:0 opacity值为0代表透明度为0 元素完全透明,视觉上消失,页面实际存在,依然对布局起作用 0-1之间代表透明度,值为1则元素完全显示…

HTML5——css基础语法

1.了解CSS CSS是一种用来表现HTML等文件样式的计算机语言,是对HTMl文件中设置的各种标签添加各种各样的样式与表达方式,让网页更生动,更美观. 2.导入CSS的三种方式 1.行内样式表:直接在<body>主体的HTML标签中,使用style""的方式引用: 比如设置一个div的大小: <div style="height:100px width:100px"></div> 优点:使用灵活,优先级权重最高缺点:不符合w3…

制作透明色：《CSS3 RGBA》与Opacity样式用法

前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是什么呢?说得简单一点就是在RGB的基础上加进了一个通道Alpha.从而形成了我们今天需要讨论的RGBA.如果需要更详细的解说,大家就跟着我一起往下看吧. 语法: R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间取值: <len…

CSS3 RGBA等于RGB加上opacity吗?

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

CSS技巧-rgba函数的妙用

先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属性(opacity)的区别:使用 opacity,所有子元素都会受到影响: 在实际开发中,有些地方用rgba()函数也更加方便:为网站 header 定制主题.文章标题.按钮.渐变.子元素.调色盘中的深/浅效果.图像效果. 最后也指出使用rgba()需要注意的地方:比如兼容性.颜色对比检查等等. 原…

CSS3 之 RGBa 可透明颜色

在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这样的透明规则相当不灵活,在实际开发中往往也是会遇到很多麻烦.其实,在 CSS3 中还有另外一套颜色透明解决方案 —— RGBa .相对于 opacity ,RGBa 可以在单个元素上设置透明度,而不影响其子元素,只是 RGBa 的浏览器支持度并没有 opacity 的广泛,因此相对较少引起开发者注意…

不透明度opacity进阶

一.opacity属性 1.opacity 习惯上说“透明度”,其实应该叫“不透明度”.opacity 意思:不透明,而背景色的默认值:transparent意思才是“透明的”.所以opacity用来设置不透明度,取值从[0.0~1.0],代表从完全透明到完全不透明,0.0就和transparent一样了,看不到但是实实在在存在. 默认值:1,完全不透明. Inherited:默认继承.所以给父元素设置opacity时,所有子元素也会继承opacity属性. <style> div{ back…

Sass函数--颜色函数--Opacity函数

Opacity函数简介在 CSS 中除了可以使用 rgba.hsla 和 transform 来控制颜色透明度之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的透明通道做处理,而后者是控制整个元素的透明度. 在 Sass 中,也提供了系列透明函数,只不过这系列的透明函数主要用来处理颜色透明度: alpha($color) /opacity($color):获取颜色透明度值: rgba($color, $alpha):改变颜色的透明度值: opacify($color, $…

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文问题如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段…

CSS常见技巧

一.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图像和背景图片合并到一张图片上,然后利用css的背景定位来显示的图片部分. 作用: 减少加载网页图片时对服务器的请求次数: 提高页面的加载速度: 减少鼠标滑过的一些bug. 二.img标签和CSS背景使用图片在使用场景上有何区别? 如果一张图片是网页内容的一部分,就该用img,否则建议用CSS背景图.要注意logo是否属于网页内容的一部…

关于 IE6、 IE7兼容性总结（转）

其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值.这点很重要,在高…

HTML5资料

1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. 1.1 基本用法 Basic usage <canvas>元素 Let's s…

CSS3颜色特征温故

网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ 255的256个单元,其中0是完全无光状态,255是最亮状态 Web页面的安全色不同平台(Mac.PC等)有不同的调色板,不同的浏览器也有自己的调色板.选择特定的颜色时,浏览器会尽量使用本身所用的调色板中最接近的颜色,如果浏览器中没有所选颜色,就会通过抖动或者混合自身的颜色来尝试重新产生该颜色Web…

总有一天会NB的！ SB一样的坚持会有NB一样的结果的！

第一天: 1.背景图不显示,因为背景图片无法撑开div,所以必须自己设置div的高度哦! 2.div水平居中! A:margin-left:auto;margin-right:auto; B: 父元素设置text-align:center; 我的问题:设置无效的原因:因为div设置了float:left:所以无法居中! 3.图片的高度是根据宽度来的哦! 所以单单设置高度是没多大用的? 4.图片会撑开div哦,所以给div设置的大小如果小于图片的话,那么图片会撑破div的哦! 还有图片的高度…

ie6,ie7兼容性总结（转）

其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值.这点很重要,在高…

HTML5与CSS3权威指南.pdf9

第21章 Media Queries相关样式该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media 设备类型 and (设备特性) {样式代码} 大部分设备特性的指定值接受min/max的前缀,表示大于等于或小于等于的逻辑使用and关键字来指定某种设备类型的某些特性满足某个条件时使用的样式,下列表示设备窗口小于640px时所使用的样式 @media screen and (max-width:…

ie6,ie7兼容性总结

摘自: http://www.cnblogs.com/li0803/archive/2009/08/22/1552094.html 其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera…