Question

我有两个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)
}

JS

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

Answer 1

首先，颜色 - 指定文本的颜色，所以我不知道你是否想要这样做。其次，请在此处查看兼容性http://css-tricks.com/rgba-browser-support/。第三，你正在改变不透明度style.opacity但你使用了颜色：rgba（），不透明度是css的另一个关键。你应该设置一个标准，然后使用它，因为你正在混淆。

Answer 2

这样的事情？我只是将rss中的不透明度与rgba分开应用。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: