css3跨浏览器不透明度 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

一篇文章带你了解CSS Opacity(透明度)

一、跨浏览器透明度现在，透明度(opacity )是CSS3规范的一部分，但是它存在了很长时间。但是，较旧的浏览器具有不同的方式来指定不透明度或透明度。...二、Firefox，Safari，Chrome，Opera和IE9中的CSS不透明度当前浏览器中CSS不透明度的最新语法。示例器的CSS透明度例： p { opacity: 0.5; /* Opacity for Modern Browsers */ filter: alpha(opacity...透明框中的文字在元素上使用不透明度时，不仅元素的背景将具有透明度，而且其所有子元素也将变为透明。如果不透明度的值变高，将使透明元素内部的文本难以阅读。...四、总结本文基于CSS基础，介绍了CSS Opacity改变图片透明度，不同的浏览器中的图片透明度改变的方法。浏览器的兼容性，改变透明框中的文字，都通过案例的分析进行详细的讲解。

3K1 0

css 背景透明

今天在开发一个漂浮在背景图上方的模态动画，之前只记得opacity和rgba可以实现透明度设置，但是在实现“背景透明，文字不透明”的效果中却不是都可行的，下面我们就来实际测试一下。...css实现透明效果的方法一般有以下3种方式，以下是不透明度都为50%的写法 css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.5 css3的rgba(red, green,...（1）opacity 不透明效果>设置opacity元素的所有后代都会一起具有透明性测试文字（2）rgba rgba(0,0,0,0.2) 颜色的rgb三色值，和透明度...IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ } .trans p{ color: red; } <div class="trans

4.1K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

一篇文章带你了解CSS3 滤镜(Filters)——下篇

上篇文章，我们介绍了CSS3滤镜效果的模糊效果、设置图像高度、调整图像对比度、向图像添加阴影等知识，这篇文章紧承上篇文章，我们重点介绍下CSS3滤镜效果的将图像转换为灰度、在图像上应用色相旋转、对图像应用不透明度知识...七、对图像应用不透明度 opacity()功能可用于为图像添加透明度。值0%表示是完全透明的，值100%或1保持表示图像不变。之间的值0%并且100%是在效果线性乘法器。...八、总结本文基于CSS基础，通过案例，详细的讲解了 CSS3滤镜的属性的使用方法。如何去设置图像的亮度，对比度，添加相应的阴影效果、改变图像的不透明度。

1.2K2 0

Adobe Photoshop，选择图像中的颜色范围

若要创建一个选区，并在保持肤色不变的同时调整其余所有部分的颜色，请选择吸管取样器下方的“反相”。 1.选取“选择”>“色彩范围”。注意:也可以使用“颜色范围”调整图层蒙版。...请参阅调整蒙版不透明度和边缘。 2.从“选择”菜单中，选取了以下选项之一：肤色选择与常见肤色类似的颜色。启用“检测人脸”，以进行更准确的肤色选择。示例颜色启用吸管工具，并从图像中选取示例颜色。...文末教程彩蛋调整蒙版不透明度和边缘使用“属性”面板可以调整选定图层或矢量蒙版的不透明度。“浓度”滑块控制蒙版不透明度。使用“羽化”，可以柔化蒙版的边缘。其他选项特定于图层蒙版。...在“图层”面板中，单击“蒙版”缩览图。缩览图周围会显示一个边框。在“属性”面板中，拖动“浓度”滑块可调整蒙版不透明度。到达 100% 的浓度时，蒙版将不透明并遮挡图层下面的所有区域。...在“图层”面板中，单击“蒙版”缩览图。缩览图周围会显示一个边框。拖动“羽化”滑块为蒙版边缘应用羽化效果。羽化模糊蒙版边缘以在蒙住和未蒙住区域之间创建较柔和的过渡。

15.2K5 0

CSS3 新特性

# CSS3 新特性结构性伪类选择器（重点）内容追加伪元素（重点） CSS3新增样式属性 background-image的渐变线性渐变(重点) CSS3的opacity 属性(重点) CSS3...# 结构性伪类选择器（重点）结构性伪类选择器是CSS3中新增加的类型选择器。常用的的结构性伪类选择器如下所示： :nth-child(n) 对指定序号的子元素设置样式（从前往后数）。...的opacity 属性(重点) opacity 属性是设置元素的不透明级别语法 opacity: value|inherit; 值描述 value 规定不透明度。...从 0.0 （完全透明）到 1.0（完全不透明）。 inherit 应该从父元素继承 opacity 属性的值。 <!...box1 { background-color: rgba(255,0,0,0.2); } .box2 { /* 整个盒子的不透明度

1.1K2 0

第161天：CSS3实现兼容性的渐变背景(gradient)效果

在众多的浏览器中，目前不支持Opera浏览器。本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。...也就是说，0代表完全透明，100代表完全不透明。 finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。...三、Firefox浏览器下的渐变背景对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性，-moz-linear-gradient属性，在之前文章我详细介绍了Firefox3.6...四、chrome/Safari浏览器下的渐变背景实现对于webkit核心的浏览器，如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法，css-gradient，具体为-webkit-gradient...补充于2011-04-07 Opera11也支持了CSS3渐变。其用法与Firefox一致，需要使用-o-的前缀。另外，Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。

1.9K3 0

总结CSS3新特性(颜色篇)

总结CSS3新特性(颜色篇) 颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),...有一点需要注意,百分比与数值不能同时出现在一个rgb函数中; rgba()与hsla(): 这两位与上边两位的区别在于后边的a(alpha)透明度; 透明度为0-1之间的数值,0为全透明,1为全不透明,...取值为当前元素的color属性值,如果没有,寻找父级,一直到根元素,如果都没有设置的话,不要担心,还有浏览器代理的默认颜色. w3官方有一个简短的解释,如果元素color属性值为currentColor...为屏幕宽度; 100vh为屏幕高度; 还存在两个值,vmax与xmin,分别是取出宽高最大或最小值; vw与vh可参与calc()的计算; 顺便介绍下 opacity: opacity用来设置元素的透明度...IE8可用替代的 filter:Alpha(opacity=50)/*0-100*/ 来实现透明度; 颜色基本上就这些了,如有错误或补充还请指出(无视transparent…) 参考资料

1.2K12 0

这18个网站能让你的页面背景炫酷起来

CSS3 Patterns Gallery ️ 传送门：『CSS3 Patterns Gallery』如果你认识 Lea Verou 的话，大概率知道这个网站，她徒手写了几十个纯CSS 实现的背景图样式...CSS3 Gradients ️ 传送门：『CSS3 Gradients』除了 Lea Verou 的网站外，CSS3 Gradients 也提供了这类示例。同样提供代码下载。 3....Hero Patterns ️ 传送门：『Hero Patterns』 Hero Patterns 是比较出名网站了，官方提供了几十款纹理，你可以根据自己的需求设置两种对比色和不透明度。...Glass Morphism ️ 传送门：『Glass Morphism』 Glass Morphism 的功能是设置毛玻璃背景样式，你可以在上面手动调节毛玻璃的不透明度、模糊度、背景色等属性。

3.9K5 0

jQuery里面的动画

jQuery动画暂不支持css3属性切换停止获取</button...function(){ console.log("动画完成"); }); }) 三、淡入淡出动画方法概述 fadeIn([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果...，并在动画完成后可选地触发一个回调函数 fadeOut([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数 fadeTo([[s],o,[e...],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数 fadeToggle([s,[e],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果

2.7K2 0

css渲染（三）颜色与背景

二、透明度 opacity 　　opacity是CSS3中专门用来设置透明度的一个属性，opacity只能给整个元素设置一个透明度，并且其透明度直接会继承给其后代元素　　值: value | inherit...其中，1表示完全不透明，0表示完全透明　　初始值: 1 　　应用于: 所有元素　　继承性: 无 opacity: 0.8; 三、背景色 [注意]所有背景属性都不能继承背景颜色背景色background...background-image会放在所指定的背景颜色之上，初始值: none background-image: url("image/1.jpg"); 背景平铺背景平铺的属性值中space和round是CSS3

2.1K6 0

css3背景颜色渐变属性（Gradients）

CSS3 渐变（Gradients） CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。...但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。...但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。...（transparent） CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。...为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

3.7K3 0

web前端开发初学者十问集锦（1）

对于那些需要很多JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。...4.Javascript脚本定义的全局变量和函数可以跨script标签调用吗？对于全局变量和函数都可以跨script标签调用。...注意rgb大小写均可; 如果增加Alpha不透明度的话，表示方式为：红色：rgba(255,0,255,1)或者RGBA(100%,0%,0%,1)。...Alpha不透明度的取值范围是0到1或者，不能使用百分比表示。第二种：hsl模式。这个是CSS3新增的颜色表示方法。...如果加上Alpha不透明度，则红色可表示为hsla(0,%100,%50,1)。第三种：htlm预定义的颜色名称。使用htlm预定义的颜色名称，如red，blue，green等。

2.8K1 0

遇见requestAnimationFrame

在浏览器端，请尝试使用垫片技术（shim ） ③ ：在支持requestAnimationFrame 的浏览器中，推荐使用requestAnimationFrame...；在不支持 requestAnimationFrame 的浏览器中，使用setTimeout 。...一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。...大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。...API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销使用： window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画

1.2K6 0

一篇文章带你了解CSS 渐变知识

CSS3 渐变使您能够是你的背景颜色在两个或多个颜色之间平滑过渡。早些时候，你必须使用图像实现这些效果。然而, 通过使用CSS3渐变可以减少下载时间和带宽的使用....此外，缩放的元素在缩放时看起来更好，因为渐变是由浏览器生成的。 ---- 一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。...使用的透明度 CSS3 渐变也支持透明度，可以用来创建淡入淡出效果。添加透明度，我们用rgba()函数来定义停止颜色。...在rgba()函数的最后一个参数可以从0到1的值，并定义颜色的透明度：0表示完全透明，1表示完全的颜色（不透明度）。下面的示例显示从左开始的线性渐变。...---- 三、CSS3 径向渐变 (由中心定义) 径向渐变是由其中心定义的。要创建径向渐变，还必须定义至少两个停止颜色。

1.7K2 0

CSS3

CSS3 浏览器内核 transition过渡 transition transition-property: all; transition-duration: 1s;...CSS3伪元素 CSS 伪元素用于设置元素指定部分的样式。...详情见：史上最全的CSS hack方式一览_freshlover的专栏-CSDN博客_css hack 渐进增强和优雅降级什么是渐进增强在网页开发中，渐进增强认为应该专注于内容本身。...一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。...然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。

9900 0

10个顶级的CSS3代码生成器

以下资源是完全免费的web应用，可用于生成图案、渐变、甚至浏览器前缀属性的CSS3代码。如果你写的是前端代码，然后这些资源可以为你节省大量的时间，并为今后的项目工作提供可重复片段。...另外，每个代码生成器还包括用于解释哪个浏览器版本完全支持该属性的图标。 ?...ColorZilla的渐变编辑器是一个免费的用于CSS3背景渐变的生成器。该设置非常类似Photoshop或其他的颜色选择器界面。...这是另一个CSS前缀生成器，它也可以执行其他高级的CSS3更新。最值得注意的是，你会发现在其他整洁效果中，它向后兼容更新CSS3不透明度，过滤器和伪元素。...如果你是一个Chrome浏览器用户，那么也可以从网站的外部访问此款免费的浏览器扩展。 ? 官方网站

1.4K6 0

Canvas系列（9）：其他API

---- 阴影 Canvas中的阴影和CSS3中的阴影很像，通过本系列课程的学习，估计你已经发现了，CSS3的好多知识和Canvas是相通的。...globalAlpha globalAlpha是设置全局的透明度，取值范围是0~1，0表示透明，1表示不透明。我们之前没有设置所绘制的图形的透明度，但是都是不透明的，所以猜都能猜出来默认值是1。

9162 1

01-移动端开发教程-CSS3新特性（上）

这边课程内容包括： CSS3新特性新选择器边框、背景升级、圆角、阴影新的盒模型渐变、动画、2D3D转换伸缩布局、多列布局新单位在线字体图标前缀应用、浏览器兼容、渐进增强媒体查询移动端适配开发方案...2.3 关于浏览器兼容的前缀由于历史原因，浏览器在实现最新的CSS3的标准的时候都存在过渡和实验阶段。...CSS3新增的选择器 3.1 属性选择器其特点是通过属性来选择元素，具体有以下5种形式：语法规则说明 E[attr] 表示存在attr属性即可 E[attr=val] 表示属性值完全等于val；...除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。...R、G、B 取值范围0~255 其中的A 表示透明度通道，即可以设置颜色值的透明度。0完全透明，1完全不透明。

2.3K0 1

01-移动端开发教程-CSS3新特性

这边课程内容包括： CSS3新特性新选择器边框、背景升级、圆角、阴影新的盒模型渐变、动画、2D3D转换伸缩布局、多列布局新单位在线字体图标前缀应用、浏览器兼容、渐进增强媒体查询移动端适配开发方案...2.3 关于浏览器兼容的前缀由于历史原因，浏览器在实现最新的CSS3的标准的时候都存在过渡和实验阶段。...CSS3新增的选择器 3.1 属性选择器其特点是通过属性来选择元素，具体有以下5种形式：语法规则说明 E[attr] 表示存在attr属性即可 E[attr=val] 表示属性值完全等于val；...除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。...R、G、B 取值范围0~255 其中的A 表示透明度通道，即可以设置颜色值的透明度。0完全透明，1完全不透明。

3.4K7 0

那些与 IE 相伴的日子

8 位色值（如 #FF0000ee），最后两位表示不透明度 Alpha 值，其中 00 表示不透明度为 0，也就是全透明状态，FF 表示不透明度 100%，也就是全不透明状态，但在 IE 浏览器下不支持...IE 情况下，使用 8 位色值，不但最后两位的不透明度无法生效，反而整个颜色设置都不能生效，下面是一个简单的 Demo 来模拟这种情况，标题的颜色设置不生效，所以呈现出默认的黑色状态。 ? ? ?...解决方法也比较简单，在这种场景下，不透明度不是必须的，可以删除掉最后两位，仅使用 6 位色值即可。...如果实在需要不透明度，我们可以使用 rgba 的格式，用最后一位值来实现透明度，如 background-color: rgba(255,0,0,0.3)，即使在 IE9 上也可以表现良好。 ?...3)处理左右镜像 IE9 支持了 CSS3 的许多属性，但还是有许多力所不能及的地方。

1.5K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭