Menu
I have an image taking up the whole viewport. Over top of it is a div, also taking up the whole viewport. The div has background: rgba(0,0,0,.5); to make the image behind it look darker. It works great, except that when the page is loading, the whole screen is covered with gray before opacity is applied and I can see the image underneath.
Is there any way to make the image and the div (with opacity applied) appear at the same time? I don't want to see the big block of gray while the page is loading.
924
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
If you just want your element to be transparent, it's really as easy as : background-color: transparent; But if you want it to be in colors, you can use: background-color: rgba(255, 0, 0, 0.4);
color is referring to the text color in that element. background is shorthand to combine many background tags into one line.
RGBA is a color format, basically containing values for red, green, blue respectively and 'A' in RGBA stands for Alpha. To set the opacity of color we mainly change the value of alpha. The value of alpha varies from 0.0 (fully transparent) to 1.0 (fully opaque).
This should do it for you https://jsfiddle.net/c259LrpL/26/
This will wait till images are loaded then make the img and the div visible at the same time... I think
<img id="img1" src="http://lorempixel.com/1200/1200/sports/1/" style="visibility: hidden" >
<div id="over" style="visibility: hidden" >
</div>
<script>
$(window).on("load", function() {
$("#img1").css("visibility", "visible");
$("#over").css("visibility", "visible");
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With