In my application, users have the ability to change the color of the background but not the pattern. They can adjust the background behind the pattern and the opacity of the pattern. Users are prompted to input a percentage, which is actually a number between 0 and 100. The program then processes this input through the following function.
When you go from 1 to 10 in steps of 1, and then from 10 to 20 in steps of 0.1, you'll notice that initially it skips by 0.1 but later goes up by 0.01 each step.
function changeOpacity(){
var patternOverlay = parseInt(document.getElementById("opacityBox").value);
if(patternOverlay != 100){
document.getElementById("patternOverlay").style.opacity = "0." + patternOverlay;
}
else if(patternOverlay < 10){
document.getElementById("patternOverlay").style.opacity = "0."+ "0" + patternOveylay.toString();
}
else{
document.getElementById("patternOverlay").style.opacity = 1;
}
}#bg{
background-color: green;
width: 50px;
height: 50px;
position: absolute;
left: 5px;
top: 50px;
}
p{
float: left;
}
#patternOverlay{
width: 50px;
height: 50px;
position: absolute;
left: 5px;
top: 50px;
background-image: url('http://www.drave.nl/kaartenmaker/includes/images/pattern0.png');
}<input id="opacityBox" min="0" max="100" oninput="changeOpacity()" type="number"></input><p>Put a number for opacity here</p>
<div id="bg"> <p> </p> </div>
<div id="patternOverlay"><p></p></div>The value obtained from the opacityBox input is then processed, where 100 turns into opacity:1;.
If the user inputs a value like 5, it should translate to CSS as opacity: 0.05;. However, when viewed in the browser's CSS display, it shows as opacity: 0.5;.