不能多次更改html元素的不透明度
不能多次更改HTML元素的不透明度是指在HTML中无法通过多次更改CSS属性来实现元素的透明度变化。一旦设置了元素的不透明度，就无法通过再次更改CSS属性来改变它。
这种限制是由CSS的工作原理决定的。CSS中的不透明度属性（opacity）是一个介于0和1之间的值，表示元素的透明度程度，0表示完全透明，1表示完全不透明。当我们设置一个元素的不透明度后，它会应用到整个元素及其内容，包括子元素。
如果我们想要实现元素透明度的动态变化，可以通过使用JavaScript来实现。JavaScript可以通过操作元素的样式属性来实现透明度的变化。例如，我们可以使用JavaScript中的setInterval函数来定时改变元素的透明度，从而实现渐变效果。
以下是一个使用JavaScript实现元素透明度变化的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#myElement {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="myElement"></div>
<script>
var element = document.getElementById("myElement");
var opacity = 1;
setInterval(function() {
opacity -= 0.1;
element.style.opacity = opacity;
if (opacity <= 0) {
clearInterval();
}
}, 1000);
</script>
</body>
</html>在这个示例中，我们通过JavaScript定时器每秒减小元素的透明度，直到透明度为0为止。
对于云计算领域，这个问题与云计算没有直接关系。云计算是一种通过网络提供计算资源和服务的模式，与HTML元素的透明度变化无关。在云计算中，我们可以利用云服务提供商的平台和工具来构建和部署应用程序，实现各种功能和服务。
腾讯云作为一家知名的云服务提供商，提供了丰富的云计算产品和解决方案。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务。
相关·内容
5回答
不透明动画应该很简单？(javascript)
javascript
好的，在学习这个javascript的过程中，我想在我的html中创建一个面板，当一个按钮被点击时，无论div中的内容是什么，都会淡出，并且新的内容会淡出in...like..like，例如，一个jquery图库。
但是因为我正在学习，所以我想自己去做。
也就是说，我试着像这样使一个虚拟div的不透明度动画化：
var daBox = document.getElementById("box");
var hmm;
function beginAnimBox (){
daBox.style.opacity = 1;
hmm = setInterval(anim
浏览 0提问于2011-12-06得票数 2
回答已采纳
11回答
如何使用JavaScript和CSS实现淡入淡出
javascript、css、xhtml
我想让一个HTML div标签淡入和淡出。
我有一些淡出的代码，但是当我淡入时，div的不透明度保持在0.1，并且不会增加。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<titl
浏览 4提问于2011-05-25得票数 68
回答已采纳
3回答
淡出在javascript中不起作用
javascript
我的目的:我试图创建一个fadeout事件使用Javascript。
这是我的密码：
<!DOCTYPE html>
<html>
<head>
<script>
function changeOpacity(){
var finalOpacity = 0 ;
var currentOpacity = document.getElementById("slide").style.opacity ;
if(currentOpacity > finalOpacity){
currentOpacity = curr
浏览 0提问于2015-04-23得票数 1
回答已采纳
2回答
使用链式JavaScript承诺褪色/嵌入图像
javascript、es6-promise
我正在尝试创建一个非JQuery图像幻灯片，其中图像基于计时器淡入/淡出。经过大量的研究，我相信JavaScript的承诺功能可以做到这一点，但它并不完全正确.
我的问题是，淡入和淡出功能似乎同时发生，所以图像只是闪烁。我正在尝试修改使用then()链接函数的许多示例中的一些，但显然有些地方不对劲。
我的逻辑是：
显示页面加载上的初始图像(通过CSS规则)
淡出
更改背景图像URL
淡入
我的，JavaScript在这里：
// Background images to show
var arr_Images = [
'https://cdn.pixab
浏览 1提问于2019-07-17得票数 1
回答已采纳
1回答
JavaScript和svg基
javascript、html、svg
我有一个问题，关于JavaScript与svg的结合。我试图动画的不透明度在JavaScript。我知道我可以用CSS或者用svg的动画来做，但是我想学习JavaScript，所以我决定这么做。我使用的是setInterval，如果我要下降(从1降到0)，它工作得很好。部分"sphere.style.opacity =不透明- opac;“工作正常！但是如果我把减号改为加法动画就不起作用了。不是从0到1！我还是不明白。这是最基本的，我不明白。当然，我会更改CSS中的值。有人知道答案吗？
HTML：
<svg height="99.7%" width="99
浏览 5提问于2015-10-29得票数 0
回答已采纳
1回答
HTML CSS如何为元素添加渐进式透明度
javascript、jquery、html、css
我有一个列表项目，在javascript事件期间，我希望将其更改为它正在消失在地平线上(例如:可能不会像一个过滤器那样将其动画化。)
是否有一种html/css/javascript方式来添加一个渐进式透明的-and，动态地这样做？元素已经有了背景，我不想改变已经存在的颜色或渐变(或者如果改变了，我必须得到原始的，然后调整它？) -just使元素从上到下逐渐淡出？
到目前为止，我所看到的一切似乎都希望将背景图像调整为渐变颜色，或者改变整个元素的不透明度。
...sorry，如果这最后真的很蠢，我只是放了个屁。
* Update *下面的内容非常接近我想要的内容，只是在不知道背景是什么的情况下，
浏览 1提问于2015-06-29得票数 0
3回答
不透明的div内部的div上没有不透明度
asp.net、html、css、opacity
我必须为任务使用asp.net ajax工具包，并且我所做的是在触发更新进度控件时在整个屏幕上显示一个div。主要的div (覆盖整个屏幕)有一些不透明度，但是当我尝试在这个里面有一个div时，它也有一些不透明度，即使我把它设置为无；
示例HTML：
<ProgressTemplate>
<div class="updateProgressBox">
<div class="updateProgressMessage">
<p
浏览 1提问于2011-02-28得票数 17
2回答
如何在启动之前延迟CSS3转换？
css、css-transitions、fadeout、css-animations
我试图显示一个元素，等待1秒，然后使用css3 transitions淡出元素。
以下是我所拥有的：
.el {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
@-
浏览 1提问于2013-12-02得票数 1
回答已采纳
4回答
jQuery图像幻灯片:标题在IE中不透明
jquery、css、internet-explorer、slideshow、opacity
我已经使用jQuery创建了一个图像幻灯片。图像在彼此之间逐渐淡出。每个图像都有标题，每个标题都在自己的div中。当图像在相关标题中淡入淡出时，会向上滑动。标题应该是透明的，这在除IE之外的所有浏览器(我已经测试过了)中都有效。
该网站网址为。
javascript (其中一个幻灯片)是：
function slideShow() {
//Set the opacity of all images to 0
$('#mainfeature a').css({
opacity: 0.0
});
//Get the first i
浏览 0提问于2009-07-04得票数 0
2回答
JS setInterval()只触发一次
javascript
<html>
<head>
<script type="text/javascript">
function topdiv() {
var z = document.createElement("DIV");
z.id = "top";
z.style = "background-color:yellow; width:100%; height:50px; opacity: 1.0";
z.class = "top"
浏览 0提问于2016-03-11得票数 0
2回答
我有一个jQuery代码，当光标下降时，不透明度会上升。我该怎么逆转呢？
javascript、jquery、html、css
$(function() {
var $win = $(window),
h = 0,
opacity = 0,
getWidth = function() {
h = $win.height();
};
$win.mousemove(function(e) {
getWidth();
opacity = (e.pageY / h);
cons
浏览 4提问于2016-11-05得票数 0
回答已采纳
1回答
透明的div，但不包含其中的内容。
html、css
在我开始之前，是的，我知道这个问题已经问过很多次了，但我还是不能让它开始工作。我有一个div，这是透明的，但内容，即文本和输入字段，我不希望是透明的。
请不要链接到以前的答案，因为我跟踪他们，但没有成功。
下面是我的CSS代码：
.csmodal {
height: 300px;
width: 600px;
background-color: rgba(25, 11, 36, .5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F
浏览 2提问于2015-01-18得票数 2
回答已采纳
3回答
为什么不透明会否定指针事件？
css、opacity
在下面的设置中，为什么没有触发单击事件(和任何其他指针事件)？
如果删除opacity: 0.5行，它将正常工作。
对于后人而言，万一jsFiddle破产(12月21日即将来临)：
HTML：
<div>
<a>Click</a>
<p>Paragraph</p>
</div>
CSS：
div { position: relative; margin: 40px; }
a { position: absolute; top: 0; right: 0; }
p { opacity: 0.5; }
联署材料
浏览 6提问于2012-12-12得票数 3
回答已采纳
1回答
正在进行的CSS3过渡，如何获取目标值？
javascript、jquery、css、transition
我有两个互不相同的div。一个正在淡出，另一个正在淡入。如何使用javascript (或jquery)来获取不透明度的目标值，以了解哪一个正在淡入，哪一个正在淡出？
演示小提琴：
我想做的是得到淡入的div的高度，然后将红色div的高度设置为这个高度。
小提琴的代码：
<html>
<head>
<style>
#content {
position:relative;
background-color:red;
}
.page {
position: absolute;
浏览 0提问于2014-03-07得票数 0
3回答
Javascript上的Fx :如何在没有框架的情况下淡出东西，等等？
javascript、dom、dhtml、effects、fade
我想学习如何在Javascript上做淡入淡出和类似的效果。我经常得到答案，比如为什么不使用Jquery、mootools等？好吧，我想了解这些东西是如何工作的，然后我不会介意使用这些框架中的任何一个。
我目前正在学习如何在DOM上进行更改，所以，我已经阅读了很多关于这个主题的东西。另外，我读过关于Reflow的文章，但是，我没有找到任何关于Repaint的很酷的东西，但是，我会继续搜索的。
通过查看源文件等，我看到了一些方法，我不知道它们是不是创建的，或者是JS的核心方法。
我的问题是，有没有什么资源可以让我学到所有这些巧妙的东西，比如平滑的位置改变，通过不透明或其他东西淡化元素等？
浏览 0提问于2009-11-13得票数 1
回答已采纳
1回答
为什么子元素不能用更大的值覆盖父元素的不透明度？
css、opacity
正如我们所知，子元素现在不能覆盖其父元素的opacity属性。父级的opacity属性始终生效。
当子对象试图覆盖(用较小的值覆盖)父对象的不透明度时，这是有意义的。但是，如果孩子试图用更大的值覆盖它呢？这难道不应该被允许吗？为什么半透明的父级不能有不透明的子级？有没有人可以分享一下，为什么这样的限制是CSS设计的一部分？
如果有人能解释一下其中的理论原因，我将不胜感激。我本质上是想找出其中的原因--不能的部分(不是变通方法；因为那些已经被讨论过很多次了)。我相信这是很多像我这样的新手想知道的。
浏览 0提问于2012-09-27得票数 39
回答已采纳
3回答
重写jQuery在var函数中添加的内联样式
javascript、jquery、html、css
这个jQuery函数为每个元素分配一个内联样式的opacity:0.25，其中包含一个grid-item类。如何覆盖它并将opacity:1的CSS添加到grid-item中的HTML元素title中？
这是一个函数，它将不透明.25的内联样式分配给具有类grid-item的选定项。它是一个更大的同位素函数的一部分，它过滤选定的项目。
// change opacity for selected/unselected items
var selectedClass = '.' + selectedCategory;
$items.filter(selectedClass
浏览 2提问于2017-01-05得票数 0
1回答
为什么这个文本不改变为完全不透明？
javascript、html、css
我在这个HTML文档上写了一个故事，我有一个Javascript，它可以将鼠标悬停到完全不透明的文本转换成完全不透明，但是它似乎只是把它推到完全不透明程度的一小部分，取决于开始不透明度。hovering类被设置为1的不透明度，所以我不明白为什么当文本更改为该类时，它不会完全不透明。
$(document).ready(function() {
var exceptions = ["lorem", "ipsum", "consectetur", "pharetra"];
$("p").each(fun
浏览 2提问于2017-04-20得票数 0
回答已采纳
3回答
Javascript不中断CSS动画
javascript、html、css、animation、timer
我正在尝试使用JavaScript来中断CSS动画，使DIV元素淡入淡出。通过CSS淡入淡出的文本效果很好，但是timed JavaScript函数不会在设定的时间间隔内“中断”淡入淡出。我已经在这个问题上挠头好一阵子了，我想知道是否某些CSS动画不能被JavaScript中断/取消。任何建议都是非常感谢的！
<style type="text/css">
#fadeMe {
opacity:1.0;
animation:fadeEffect 6s infinite;
-webkit-animation:fadeEffect 6s infin
浏览 0提问于2014-03-09得票数 0
3回答
如何在JavaScript中创建CSS动画？
javascript、css、animation、css-animations、opacity
如何在JavaScript中创建下面的CSS动画？我已经找遍了谷歌，并多次尝试创建它，但我不知道如何做到这一点。 @keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
} 要运行这个程序，我知道我可以使用下面显示的内容，但我不知道如何创建这个动画。有人能帮上忙吗？ element.style.animation = "fadeIn 5s linear";
浏览 29提问于2020-11-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
