如果不透明度以 0.0 开头，则不透明度在 javascript 中无法正常工作答案

【问题标题】：Opacity not working properly in javascript if it starts as 0.0如果不透明度以 0.0 开头，则不透明度在 javascript 中无法正常工作
【发布时间】：2015-02-05 00:52:45
【问题描述】：

我有两个相互重叠的 div。一个有背景图像，另一个是不透明度为 0 的叠加层。使用鼠标悬停时，背景会发生变化，并且叠加层的不透明度为 1，而在鼠标离开时，背景会变回原始图像，而叠加层会变回透明。

这是奇怪的部分，如果不透明度从 0 开始，它就不起作用。如果不透明度从 1 开始，它可以完美地工作，除了在页面加载时覆盖是可见的。那么发生了什么，我如何让它从不透明度为 0 开始工作？

HTML

<BODY>
<div id="corporate" onmouseover="changebg('contract.jpg', 1)"     
onmouseleave="changebg('corporate.jpg', 0)" 
onclick="changepage('corporate.html')"><div id="corporateoverlay">  
<h1>Corporate</h1></div>
</div>
</BODY>
</HTML>

CSS

body {
background-color: #000000;
color: #ffff00;
}

h1 {text-align: center;}

#corporate {
width: 50%;
height: 250px;
clear: left;
float: left;
background-image: url('corporate.jpg');
background-size: 100%;
}

#corporateoverlay {
color: rgba(255,255,0,1)
}

function changebg (newpic, opac) {
var urlString = 'url(' + newpic + ')';
document.getElementById("corporate").style.backgroundImage = urlString;
document.getElementById("corporateoverlay").style.opacity = opac;
}

【问题讨论】：

标签： javascript opacity

【解决方案1】：

首先，颜色 - 指定文本的颜色，所以我不知道你是否想这样做。其次，在这里检查兼容性http://css-tricks.com/rgba-browser-support/。第三，您正在更改不透明度 style.opacity，但您使用了颜色：rgba()，不透明度是 css 中的另一个关键。你应该建立一个标准，然后使用它，因为你把事情搞混了。

【讨论】：

【解决方案2】：

像这样？我只是将不透明度与 rgba 分开应用在 css 中。

function changebg (newpic, opac) {
    var urlString = 'url(' + newpic + ')';
    document.getElementById("corporate").style.backgroundImage = urlString;
    document.getElementById("corporateoverlay").style.opacity = opac;
    }

body {
    background-color: lightgray;
    color: gray;
}

h1 {text-align: center;}

#corporate {
    width: 50%;
    height: 250px;
    clear: left;
    float: left;
    background-image: url('corporate.jpg');
    background-size: 100%;
}

#corporateoverlay {
    color: gray;
    opacity: 0;
}

<div id="corporate" onmouseover="changebg('contract.jpg', 1)"     
    onmouseleave="changebg('corporate.jpg', 0)" 
    onclick="changepage('corporate.html')">
        <div id="corporateoverlay">  
            <h1>Corporate</h1>
        </div>
    </div>

【讨论】：