有没有办法用JavaScript修改CSS背景颜色的不透明度值？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

时至今日，浏览器色彩居然仍旧失真？

你的浏览器色彩失真情况 post15image2.png CSS 渐变 post15image3.png SVG 渐变正确的透明度 post15image4.png 绿色和白色为25%的不透明度...，黑色为75%的不透明度在25%的透明度下叠加明亮的颜色，应该是为了正确地染上底层的黑暗区域，像灯光照在投影屏幕上一样洗掉它们。...透明度混合需要像本例中那样工作，以便像字体和形状抗锯齿这样的东西能够正常工作并看起来正确，在不同的背景颜色下具有一致的重量和平滑的边缘。...你的浏览器透明度失真情况 post15image5.png PNG的透明度 post15image6.png CSS rgba()背景 post15image7.png CSS的不透明度 post15image8...网络上几乎所有的颜色（从普通PNG文件中的数据到CSS和SVG中的十六进制值）都不是以实际的颜色强度来表示的，而是使用一种叫做 "8位sRGB "的有损压缩算法。

4.7K17 7

前端特效开发 | JS实现聚光灯看图效果

上图的效果结合相关的描述，大家对此效果的实现有没有一点自己的思路或者方法呢？ 2....之后借助样式设置方法.css()，为列表项的每个列表设置当前图片的大小，使用对象.属性的方式取得前面对象中存储的值。...实现图片的聚光效果实现聚光灯效果，主要需要考虑两个方面，一个是鼠标移入时对选中的图片进行高亮展示，同时对其它未选中的设置前面对象中设置好的透明度值；另一方面需要考虑的是当鼠标移开图片时，需要移除高亮显示...img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项，并更改其中的图像的不透明度为我们在Spotlight..." href="css/reset.css" /> javascript" src="https://cdnjs.cloudflare.com/ajax/libs

5.2K5 0

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

是的

没有找到

css渲染（三）颜色与背景

二、透明度 opacity 　　opacity是CSS3中专门用来设置透明度的一个属性，opacity只能给整个元素设置一个透明度，并且其透明度直接会继承给其后代元素　　值: value | inherit...其中，1表示完全不透明，0表示完全透明　　初始值: 1 　　应用于: 所有元素　　继承性: 无 opacity: 0.8; 三、背景色 [注意]所有背景属性都不能继承背景颜色背景色background...接受所有合法的颜色，背景颜色不能继承，其默认值是transparent。.../1.jpg"); 背景平铺背景平铺的属性值中space和round是CSS3新增的值。...space表示背景图像的两端对齐平铺，多出来的空间用空白代替；round也表示背景图像的两端对齐平铺，但多出来的空间通过自身拉伸来填充。

1.6K6 0

QQ隐藏图原理与C#实现(含源文件)

QQ群聊的背景色为白色，而打开图片后的背景色为黑色，如果能巧妙修改图片各个像素的透明度，就可以达到在不同背景下显示出不同图片的功能。...原来之前的灰度图中，使用灰色像素来显示白图，在白色背景下通过不透明度让灰色像素显示，而在黑色背景下，灰色像素有颜色优势，无论不透明度是多少都不影响它在黑色背景下隐藏。...白图在黑色背景下，灰度值越高(颜色越白)，则不透明度应该越低。...对于黑图，它想要在黑色背景下显示，因此灰度值越大(颜色越白)，不透明度越高，即不透明度与灰度值也成正比，我们也用上面那式子来代入计算，得到 alpha = G，这是黑图的计算方法。...据我所知，目前最新版QQ的默认背景不是纯白，因此直接使用我的源文件可能会出现显示异常，你可以对我的源文件进行修改，使之能够适应最新版QQ背景颜色。

2K1 0

less中的内置函数

由于 less 的底层就是用 JavaScript 实现的所以 JavaScript 中常用的一些函数在 less 中都支持@str: "./...../index.css">图片@str: "./.....fadein(color, 10%)// 增加透明度fadeout(color, 10%)// 设置绝对不透明度(覆盖原透明度)fade(color, 20%)// 旋转色调角度spin(color,...10)// 将两种颜色混合，不透明度包括在计算中。...(color1, color2)// 计算每个通道(RGB)基础上的两种颜色的平均值average(color1, color2)其它函数可参考如下提供的链接：https://www.cnblogs.com

3922 0

前端|手风琴--抽屉式网页特效

抽屉式网页通过移动鼠标来实现页面的切换，通过改变文字和图片而展现不同的界面，它非常实用而且实现简单。解决方案制作抽屉式页面时，主要会用到HTML，CSS和JavaScript。...（1）通过div来规定主要内容部分占据的大小，并通过CSS来修正。（2）使用overflow标签，使得多余的图片部分隐藏。（3）通过js来实现图片的移动。...制作过程：（1）为网页添加背景图片，并定义一个容器wrap来规定网页主要内容的大小和它占据的位置，如图1所示。...属性来清除浮动，并且用rgba属性来为文字改变颜色和透明度。...rgba是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写，颜色值取0至250；透明度取值在0到1之间，数值越小则越透明。

3.9K1 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三色值，和透明度 <!

3.4K4 0

从零开始学 Web 之 CSS（一）选择器

在网页制作时采用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。...2、CSS 的作用简单地来讲，CSS 能对你制作的网页进行布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。...解释属性：值宽 width: 20px; 高 height: 20px; 背景颜色 background-color: red; 文字大小 font-size: 24px; 内容的水平对齐方式 text-align...PS： #EEE == #EEEEEE； #333 == #333333） rgb(120, 120, 120) A代表alpha 不透明度，值 0~1（比如：rgb(120,120,120. 0.5)...）PS：不透明度也可以使用：opacity:0.2; 来设置。

8924 0

CSS 如何设置背景透明，并使用 PHP 将十六进制的颜色值转换成 RGBA 格式

使用 RGBA 设置背景透明我们使用 CSS 设置颜色的时候，一般适用十六进制值的颜色，比如黄色就是：#ffff00。其实颜色的值还可以通过 RGBA 的方式来设置。...所谓 RGBA 颜色，就是 RGB 三原色加 ALPHA，比如黄色就是：rgba(255, 255, 0, 1)，因为不透明，所以第四个参数为 1，所以背景为黄色的代码为：background:rgba...所以在给背景添加颜色的同时，可以通过第四个参数提供透明度特性，比如设置为 0.3 的效果：最终透明背景的 CSS 代码为：background:rgba(255, 255, 0, 0.3)。...使用 PHP 将十六进制的颜色值转换成 RGBA 格式但是我们在后台设置颜色的时候，一般设置成十六进制的颜色值，然后再加上一个透明度：那么怎么转换成 RGBA 格式呢？...')'; } } 这个函数非常简单，只有两个参数，第一个是十六进制的颜色值，第二个是透明度，然后透明度没有传递，则生成颜色的 RGB 值，传递了则生成 RGBA 的值。

5K4 0

【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式

本期介绍本期主要介绍CSS进阶之元素的背景以及清除浏览器默认样式文章目录 1. 简述 2. 背景颜色 2.1 概述及格式 2.2 透明度设置-rgba 3. ...背景颜色 2.1 概述及格式用于设置标签的背景颜色格式： background-color : 颜色值 ; 注意，背景颜色的默认值是透明，即为： transparent 颜色设置方式...： 2.2 透明度设置-rgba 我们除了可以用三种设置具体的背景颜色外，还可以设置背景颜色的透明度。...所以为了铺满背景， CSS 采取了重复显示多个的策略。...这里为各位提供一套清空浏览器默认样式的 CSS 代码，各位只需要将其保存成 CSS 文件，每次 HTML 引入该文件，即可完成浏览器默认样式的清空。

1.4K4 0

现代 CSS 颜色指南

在 CSS 中，颜色无处不在，它可以作为文字、背景、阴影、表格、边框、链接等属性。...我们在 CSS 中使用的大多数颜色都是 hex 和 RGB，其实表示颜色的方式有很多，下面就来看看CSS中的颜色体系。 1....CSS 命名颜色 CSS中提供了148个命名颜色，所有浏览器都支持这些名称，这些名称都是被预定义过色值的。...不透明度范围可以是 0 到 1 之间的任何值，0 是最小值（无不透明度），1 是最大值（完全不透明度）： div { color: rgba(0,0,0,0.5); border: 1px solid...所以，#ff0000、#FF0000、#Ff0000的显示效果是一致的。 3. Hex 颜色我们还可以使用十六进制值来表示 CSS 中的颜色，这也是我们用的最多的颜色表示方式。

4K2 0

LESS第六课(内置函数层级结构继承()注意是extend，不是extends)

/* 由于less的底层就是用JavaScript实现的, 所以JavaScript中常用的一些函数在less中都支持 */ 不想介绍，因为太他妈多了。。。。你们自己看把. css/11-less中的内置函数.css"> /* 由于...less的底层就是用JavaScript实现的, 所以JavaScript中常用的一些函数在less中都支持 */ // 混杂方法 /* image-size("...fadein(color, 10%) 增加透明度 fadeout(color, 10%) 设置绝对不透明度(覆盖原透明度) fade(color, 20%)...旋转色调角度 spin(color, 10) 将两种颜色混合，不透明度包括在计算中。

1.5K2 0

particles.js使用及配置

style.css 我们也可以引入，背景颜色是在css中设置的。...particles.shape.image.height number (for aspect ratio) 图片高度 100 particles.opacity.value number (0 to 1) 不透明度...0.75 particles.opacity.random boolean 随机不透明度 true / false particles.opacity.anim.enable boolean...#ffffff particles.line_linked.opacity number (0 to 1) 连接线不透明度 0.5 particles.line_linked.width number...原子互动抓取距离 100 interactivity.events.modes.grab.line_linked.opacity number (0 to 1) 原子互动抓取距离连线不透明度

1.4K3 0

【PS算法理论探讨一】 Photoshop中两个32位图像混合的计算公式（含不透明度和图层混合模式）。

我们假定有2个32位的图层，图层BG和图层FG，其中图层BG是背景层（位于下部），图层FG是前景层（位于上部），我们摸索其混合后的颜色的计算公式。...这个计算式用Maltab去简化的话基本没有任何效果。场景三：仅仅改变图层的不透明度如下所示设置，前景层的不透明度为70%。...还是先来看A值，经过测试比对，此时A值的计算公式为：其中O表示不透明度的值，有效范围是[0,100]。...核算一下：对于A值，我们可以认为不透明度首先修改了改成的Alpha，然后再拿这个新的Alpha和底层的Alpha进行正常的混合。...可以看到，A值和混合模式没啥关系，之和不透明度有关，直接用只改变不透明度时的公式：那么RGB的变化，从前面的几个公式中可以猜测肯定是先下面这个式子了：测试下：

2.3K2 0

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

解决的办法就是将js脚本置于html标签后或者至于body标签的最后。 3.script标签内Javascript脚本在页面加载时会执行吗？会执行。...注意rgb大小写均可; 如果增加Alpha不透明度的话，表示方式为：红色：rgba(255,0,255,1)或者RGBA(100%,0%,0%,1)。...Alpha不透明度的取值范围是0到1或者，不能使用百分比表示。第二种：hsl模式。这个是CSS3新增的颜色表示方法。...其中，HSL色彩模式亦是工业界的一种颜色标准，分别对应色相(Hue)，也叫色调、饱和度(Saturation)、明度(Lightness)。三者的取值分别为： Hue(色调)。...比如红色的表示为：hsl(0,%100,%50)。亮度如果为100%，那么就变成了白色。hsl不区分大小写。如果加上Alpha不透明度，则红色可表示为hsla(0,%100,%50,1)。

2.3K1 0

利用canvas实现一个抠图小工具

canvas是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素。它可以用于制作照片集或者制作简单(也不是那么简单)的动画.。...1、读取图片资源； 2、把图片资源绘制到画板上； 3、作为前端开发的你可以开始为所欲为了；先看一下很简单的HTML结构和CSS样式的一维数组 // 可以通过修改该数组的数据，达到修改图片内容的目的 const data = imageData.data...而是说使用 canvas 进行透明度分析，把图片分成透明的 PNG + 不透明的 JPG，然后通过 SVG 将两张图片层叠到一起，减少了不透明部分 alpha 值的储存空间。...基本流程如下： 1、读取图片资源； 2、使用原图像数据去除透明度作为底色画到画板上，这一层可以作为没有透明度的JPG图像，利用JPG图像的压缩效率极大减小图片的存储规模； 3、使用原图像数据将图像颜色数量缩减到一定的数量级

2.8K5 0

jquery nicescroll 配置参数

，默认值是“＃000000” cursoropacitymin - 改变不透明度非常光标处于非活动状态（scrollabar“隐藏”状态），范围从1到0，默认为0（隐藏） cursoropacitymax...- 改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0，默认值是1（完全不透明） cursorwidth - 像素光标的宽度，默认值为5（你可以写“加入5px”太...） cursorborder - 游标边框css定义，默认为“1px的固体＃FFF” cursorborderradius - 以像素为光标边界半径，默认为“递四方” zIndex的 - 改变...，真=默认/“光标”=只进游标隐藏/ false =不隐藏背景，CSS改变轨道的背景下，默认为“” iframeautoresize，在加载事件AUTORESIZE的iframe（默认：true）...cursorminheight，设置在像素的最小光标高度（默认值：20） preservenativescrolling，您可以滚动本机可滚动区域用鼠标，冒泡鼠标滚轮事件（默认：true） railoffset

5K8 0

与Ajax同样重要的jQuery（1）

在动画完成时执行的函数 fadeOut(speed, [callback]) 概述通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。...这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。...： ² 为表单中所有隐藏域添加 class属性，值为itcast ² 设置table所有可见 tr 背景色黄色 ² 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值值包含value的所有元素练习6： ² 设置所有含有id属性的div，字体颜色红色 ² 设置所有class属性值含有itcast元素背景色为黄色...下3的倍数行，字体颜色为红色 ² 表格奇数行背景色黄色 ² 表格偶数行背景色灰色 ² 只有一个td的 tr元素字体为蓝色 javascript"src

11.2K6 0

使用chrome调试CSS

2、其中继承的属性是不透明的。选中 Show All 复选框可以查看所有继承的值。 3、注意属性的显示是按照字母顺序排列的。 4、Filter 过滤器可以按照查询规则搜索符合规则的样式。...####修改已有样式规则的声明 1、在需要更改的原有样式上双击，修改样式规则，并按 Enter 键。给元素添加CSS类 1、在 styles 选项卡中点击 .cls 。...3、这里的更多操作还有其他一些功能，从左往右依次是文字阴影、盒子阴影、文字颜色、背景颜色。...页面重新加载，Coverage选项卡提供浏览器加载的每个文件使用多少CSS（和JavaScript）的概述。绿色代表使用CSS。红色表示未使用的CSS。...RGBA，HSLA或Hex的颜色表示。 5、调色板。单击其中一个方块可将颜色更改为该方块。 6、色相。 7、透明度。 8、显示值切换器。在当前颜色的RGBA，HSLA和Hex表示之间切换。

6.8K2 0

WebRender：让网页渲染如丝顺滑

浏览器将使用数字填充每个位置，这些数字代表 RGBA（红、绿、蓝以及 alpha 通道）形式的颜色值。 ? 当显示器需要刷新时，将会查询这一段内存。多数电脑显示器每秒会刷新 60 次。...例如形状是单一颜色的，则着色器程序只需要为形状中的每个像素返回同一个颜色。另外一些情况更复杂，例如有背景图像的时候，需要搞清楚图像对应于每个像素的部分。...假设有一个透明度为 0.5 的元素，该元素包含子元素。你可能觉得每个子元素都将是透明的……但实际上整个组才是透明的。 ? 因此需要先将该组渲染为一个纹理，每个子元素都是不透明的。...第二遍的时候，可以将这个角通过镜像放置到盒子的各个部分。然后就可以完全不透明地渲染该组。 ? 接下来，我们需要做的就是改变这个纹理的不透明度，并将其放在需要输入到屏幕的最终纹理中。 ?...绘制下一个形状时，遇到同一像素，先检查是否已经有值。如果有值，则跳过。 ? 不过这有一点点问题。当形状是半透明的时候，需要混合两种形状的颜色。为了让它看起来正确，需要从里向外绘制。

3.7K3 0

点击加载更多

时至今日，浏览器色彩居然仍旧失真？

前端特效开发 | JS实现聚光灯看图效果

css渲染（三）颜色与背景

QQ隐藏图原理与C#实现(含源文件)

less中的内置函数

前端|手风琴--抽屉式网页特效

css 背景透明

从零开始学 Web 之 CSS（一）选择器

CSS 如何设置背景透明，并使用 PHP 将十六进制的颜色值转换成 RGBA 格式

【网页前端】CSS进阶之元素的背景以及清除浏览器默认样式

现代 CSS 颜色指南

LESS第六课(内置函数层级结构继承()注意是extend，不是extends)

particles.js使用及配置

【PS算法理论探讨一】 Photoshop中两个32位图像混合的计算公式（含不透明度和图层混合模式）。

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

利用canvas实现一个抠图小工具

jquery nicescroll 配置参数

与Ajax同样重要的jQuery（1）

使用chrome调试CSS

WebRender：让网页渲染如丝顺滑

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐