Menu
I am trying to make a loading page. My html code looks like the below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Coba</title>
<style type="text/css">
p.pTest {
height: 200px;
width: 200px;
background-color: green;
}
#loadingImageFc {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
z-index:9999;/* make higher than whatever is on the page */
}
body{
opacity:0.2;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<p class="pTest">
Test
</p>
<div id="loadingImageFc">
<img src="loading-text.gif" />
</div>
</body>
</html>When I run this, my loading image also get the opacity : 0.2. How can I exclude it?
240
There's no CSS property that you can use to change the opacity of only the background image. Unlike background colors, which allow you to adjust the alpha channel to control opacity, it simply doesn't exist for the background-image property.
Answer: Use the CSS RGBA colors There is no CSS property like "background-opacity" that you can use only for changing the opacity or transparency of an element's background without affecting its child elements.
The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel).
Setting the opacity of an element changes the appearance of the whole element including all its descendants.
You would have to rewrite your HTML so that, for example, the element you are changing the opacity of is not the body (e.g. you could use a div wrapped around everything currently inside the body, or your existing <p class="pTest">) and the image you want to be fully visible is a sibling of that element.
198
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
