Непрозрачность не работает должным образом в JavaScript, если он начинается с 0,0

Question

Непрозрачность не работает должным образом в JavaScript, если он начинается с 0,0

У меня есть два деления друг на друга. Один имеет фоновое изображение, а другой - наложение с непрозрачностью 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;
}

0

javascript opacity

Источник

user3884917 04 фев '15 в 16:43

2 ответа

Другие вопросы по тегам javascript opacity

user4524874 04 фев '15 в 16:49 2015-02-04 16:49 · Answer 1 · 2015-02-04 16:49

Прежде всего, цвет - определяет цвет текста, поэтому я не знаю, хотите ли вы это сделать. Во-вторых, проверьте здесь совместимость http://css-tricks.com/rgba-browser-support/. В-третьих, вы меняете непрозрачность style.opacity, но используете color: rgba(), непрозрачность - еще один ключ в css. Вы должны установить стандарт, а затем работать с ним, потому что вы все путаете.

user2040710 04 фев '15 в 16:52 2015-02-04 16:52 · Answer 2 · 2015-02-04 16:52

Что -то вроде этого? Я просто применил прозрачность в CSS отдельно от RGBA.

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>