Javascript如何改变透明度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript如何改变透明度相关的知识,希望对你有一定的参考价值。

我设计了一个登陆界面,其中有两个标签(登陆和注册),标签在点击后会显示不同的表单。我想修改这个标签的透明度,两个表单div的id是login和register,标签的div是left right.为什么隐藏和显示可以正常运行但是调整透明度的不可以呢,我知道ie和ff的调整透明度的代码不同,但是即便我试了fiter和opacity都不行,JS一旦运行到调整透明度的语句就不在往下运行了,有没有大牛知道我的问题在哪里。

仅从代码来看是没问题的。但影响程序运行的因素是多方面的,没看到你完整的代码(包括js和html),不好妄下定论,仅仅猜测一下:你说运行到调整透明度的语句就不再往下运行了,那么原因估计是两个:一是left和right这两个id在页面上不存在(或者存在一个以上);二是浏览器不支持opacity。你可以在出错的地方测试一下:
console.log(document.getElementById("left"));
console.log(document.getElementById("left").style.opacity);
只要看哪个显示的是undefined,就知道是哪个出问题了。
其实你按F12打开开发者界面,看一下红字提示应该就知道什么原因了啊?不会用吗?
参考技术A 换个浏览器或添加多内核兼容语句
var alpha = 30; //透明度值变量
var oDiv = document.getElementById('div1'); //获取DOM元素对象
oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //设置IE的透明度
oDiv.style.opacity = alpha / 100; //设置fierfox等透明度,注意透明度值是小数追问

这样写我试过了,还是没有用啊。

参考技术B //IE
var lg=document.getElementById("login");
var op=30;

lg.style.filter="progid:DXImageTransform.Microsoft.Alpha(Enabled=true)";
lg.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=op;

如何改变儿童的不透明度[重复]

【中文标题】如何改变儿童的不透明度[重复]【英文标题】:How to change opacity on children [duplicate] 【发布时间】:2021-04-24 09:44:09 【问题描述】:

我可以在div 上显示低颜色,以使图像像第一张图像一样清晰吗?

我用具有不透明度的div 覆盖图像,以便在显示图像时显示div

请告诉我是否有不使用不透明度的方法。

这就是我想要的结果:

如何定义不透明度以不影响子元素?这是我想要的:

我尝试了color: rgb(255, 255, 255);,但它显示了相同的结果。

这就是现在的样子,它不会改变孩子的不透明度。

我的 CSS

.image-cover 
  background:#858C94;
  opacity:0.7;
  width: 60px;
  height: 60px;
  margin-top: -66.8px;
  position: relative;

.mediv
  color: rgb(255, 255, 255);

我的 HTML

<div class='row image-cover'>
  <div className='mediv'>2</div>
  <div className='mediv' >bk52</div>
</div>

【问题讨论】:

请发布您的 HTML 和 CSS。 “在&lt;div&gt; 上显示低颜色”是什么意思? 我在@TusharMaheshwari的回答中得到了答案,感谢您的帮助 【参考方案1】:

您可以在将父级的背景属性声明为时使用 Alpha

background:rgba(133,140,​​148,0.5)

而不是不透明度。所以子元素不会受到影响。

【讨论】:

这不是纵横比。那是 Alpha - 处理每像素透明度的通道。

以上是关于Javascript如何改变透明度的主要内容,如果未能解决你的问题,请参考以下文章

cesium如何改变地图gamma某一块区域的透明度

如何改变儿童的不透明度[重复]

jss如何改变颜色的不透明度

你如何改变表格边框的不透明度[重复]

如何改变ggplot中椭圆的半透明度?

jQuery实例分析解析