html - image still shows translucent opacity after change in opacity value -
functionality:
the following page translucent , has opacity: 0.68;
and within page, have image opacity: 1.0;
. main idea the image placed in overlay on translucent background, , image shouldn't sharing same translucent property background.
issue:
the image within translucent page sharing same translucent property, though have set opacity property of image 1.0.
how able set image of solid state without showing opacity property have set main background?
.brandmenu { background-color: #d3d3d3; filter: alpha(opacity=98); opacity: 0.98; } .branddescription { background-color: #ffffff; filter: alpha(opacity=200); opacity: 1.0; }
<div id="park_branddescription" class="brandmenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;"> <img id="pa_description" class="branddescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px; z-index=99;"> </div>
the reason explained in answer of @eisbehr, can have translucid background rgba()
values without affecting opacity of children elements:
.brandmenu { background-color: rgba(211, 211, 211, 0.98); } .branddescription { background-color: #ffffff; }
<div id="park_branddescription" class="brandmenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: block; top:0px; margin:auto;"> <img id="pa_description" class="branddescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px;" src="http://lorempixel.com/400/200"> </div>
and there's no 2.0
value of opacity, maximum 1.0
(100%)
Comments
Post a Comment