Calculating the child's opacity when the parent has a specific opacity
I have parent element whose opacity is 0.5 . I want child opacity to be 0.3 .
what should be the value for opacity for child element
css css3
edited Nov 23 '18 at 19:38
Temani Afif
73.8k94284
asked Nov 23 '18 at 17:14
user3190467user3190467
43
add a comment |
I have parent element whose opacity is 0.5 . I want child opacity to be 0.3 .
what should be the value for opacity for child element
css css3
edited Nov 23 '18 at 19:38
Temani Afif
73.8k94284
asked Nov 23 '18 at 17:14
user3190467user3190467
43
@fcalderan Child is more transparent, not less opaque.:)
– Praveen Kumar Purushothaman
Nov 23 '18 at 17:31
add a comment |
I have parent element whose opacity is 0.5 . I want child opacity to be 0.3 .
what should be the value for opacity for child element
css css3
edited Nov 23 '18 at 19:38
Temani Afif
73.8k94284
asked Nov 23 '18 at 17:14
user3190467user3190467
43
I have parent element whose opacity is 0.5 . I want child opacity to be 0.3 .
what should be the value for opacity for child element
css css3
css css3
edited Nov 23 '18 at 19:38
Temani Afif
73.8k94284
asked Nov 23 '18 at 17:14
user3190467user3190467
43
edited Nov 23 '18 at 19:38
Temani Afif
73.8k94284
asked Nov 23 '18 at 17:14
user3190467user3190467
43
edited Nov 23 '18 at 19:38
Temani Afif
73.8k94284
edited Nov 23 '18 at 19:38
Temani Afif
73.8k94284
edited Nov 23 '18 at 19:38
Temani Afif
73.8k94284
73.8k94284
asked Nov 23 '18 at 17:14
user3190467user3190467
43
asked Nov 23 '18 at 17:14
user3190467user3190467
43
asked Nov 23 '18 at 17:14
user3190467user3190467
43
43
@fcalderan Child is more transparent, not less opaque.:)
– Praveen Kumar Purushothaman
Nov 23 '18 at 17:31
add a comment |
@fcalderan Child is more transparent, not less opaque.:)
– Praveen Kumar Purushothaman
Nov 23 '18 at 17:31
@fcalderan Child is more transparent, not less opaque.
:)– Praveen Kumar Purushothaman
Nov 23 '18 at 17:31
@fcalderan Child is more transparent, not less opaque.
:)– Praveen Kumar Purushothaman
Nov 23 '18 at 17:31
add a comment |
2 Answers
2
active
oldest
votes
You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.
Simple math:
0.5 × x = 0.3 (this is what we want)
0.5 1
--- = -
0.3 x
0.3 / 0.5 = 0.6 = x
.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}<div class="parent">
<div class="child">
</div>
</div>answered Nov 23 '18 at 17:29
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
133k23136184
1
I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1
– Temani Afif
Nov 23 '18 at 19:37
@TemaniAfif Agree with you...
– Praveen Kumar Purushothaman
Nov 23 '18 at 20:38
add a comment |
In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:
.parent {
opacity: var(--op, 0.5);
}
.child {
background: blue;
height: 50px;
opacity: calc(var(--oc)/var(--op, 0.5));
}<div class="parent">
<div class="child" style="--oc:0.3">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
<div class="child" style="--oc:0.4">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).
answered Nov 23 '18 at 20:30
Temani AfifTemani Afif
73.8k94284
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450703%2fcalculating-the-childs-opacity-when-the-parent-has-a-specific-opacity%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.
Simple math:
0.5 × x = 0.3 (this is what we want)
0.5 1
--- = -
0.3 x
0.3 / 0.5 = 0.6 = x
.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}<div class="parent">
<div class="child">
</div>
</div>answered Nov 23 '18 at 17:29
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
133k23136184
1
I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1
– Temani Afif
Nov 23 '18 at 19:37
@TemaniAfif Agree with you...
– Praveen Kumar Purushothaman
Nov 23 '18 at 20:38
add a comment |
You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.
Simple math:
0.5 × x = 0.3 (this is what we want)
0.5 1
--- = -
0.3 x
0.3 / 0.5 = 0.6 = x
.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}<div class="parent">
<div class="child">
</div>
</div>answered Nov 23 '18 at 17:29
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
133k23136184
1
I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1
– Temani Afif
Nov 23 '18 at 19:37
@TemaniAfif Agree with you...
– Praveen Kumar Purushothaman
Nov 23 '18 at 20:38
add a comment |
You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.
Simple math:
0.5 × x = 0.3 (this is what we want)
0.5 1
--- = -
0.3 x
0.3 / 0.5 = 0.6 = x
.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}<div class="parent">
<div class="child">
</div>
</div>answered Nov 23 '18 at 17:29
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
133k23136184
You need to have 0.6 Opacity on something that's already having 0.5 Opacity to have the final opacity to be 0.3.
Simple math:
0.5 × x = 0.3 (this is what we want)
0.5 1
--- = -
0.3 x
0.3 / 0.5 = 0.6 = x
.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}<div class="parent">
<div class="child">
</div>
</div>.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}<div class="parent">
<div class="child">
</div>
</div>.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}<div class="parent">
<div class="child">
</div>
</div>answered Nov 23 '18 at 17:29
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
133k23136184
answered Nov 23 '18 at 17:29
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
133k23136184
answered Nov 23 '18 at 17:29
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
133k23136184
answered Nov 23 '18 at 17:29
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
133k23136184
133k23136184
1
I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1
– Temani Afif
Nov 23 '18 at 19:37
@TemaniAfif Agree with you...
– Praveen Kumar Purushothaman
Nov 23 '18 at 20:38
add a comment |
1
I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1
– Temani Afif
Nov 23 '18 at 19:37
@TemaniAfif Agree with you...
– Praveen Kumar Purushothaman
Nov 23 '18 at 20:38
1
1
I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1
– Temani Afif
Nov 23 '18 at 19:37
I would add two elements, one with an rgba color and the other with the opacity so we can better see the correct result: jsfiddle.net/8wa4q6h2/1
– Temani Afif
Nov 23 '18 at 19:37
@TemaniAfif Agree with you...
– Praveen Kumar Purushothaman
Nov 23 '18 at 20:38
@TemaniAfif Agree with you...
– Praveen Kumar Purushothaman
Nov 23 '18 at 20:38
add a comment |
In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:
.parent {
opacity: var(--op, 0.5);
}
.child {
background: blue;
height: 50px;
opacity: calc(var(--oc)/var(--op, 0.5));
}<div class="parent">
<div class="child" style="--oc:0.3">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
<div class="child" style="--oc:0.4">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).
answered Nov 23 '18 at 20:30
Temani AfifTemani Afif
73.8k94284
add a comment |
In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:
.parent {
opacity: var(--op, 0.5);
}
.child {
background: blue;
height: 50px;
opacity: calc(var(--oc)/var(--op, 0.5));
}<div class="parent">
<div class="child" style="--oc:0.3">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
<div class="child" style="--oc:0.4">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).
answered Nov 23 '18 at 20:30
Temani AfifTemani Afif
73.8k94284
add a comment |
In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:
.parent {
opacity: var(--op, 0.5);
}
.child {
background: blue;
height: 50px;
opacity: calc(var(--oc)/var(--op, 0.5));
}<div class="parent">
<div class="child" style="--oc:0.3">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
<div class="child" style="--oc:0.4">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).
answered Nov 23 '18 at 20:30
Temani AfifTemani Afif
73.8k94284
In addition to the answer of @Praveen Kumar Purushothaman I would use CSS variables to better control this:
.parent {
opacity: var(--op, 0.5);
}
.child {
background: blue;
height: 50px;
opacity: calc(var(--oc)/var(--op, 0.5));
}<div class="parent">
<div class="child" style="--oc:0.3">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
<div class="child" style="--oc:0.4">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>You may notice that you can only have an opacity value between 0 and op which is logical since the child cannot be more opaque than it's parent and because the formula won't allow bigger values (you will have an opacity > 1 which is invalid).
.parent {
opacity: var(--op, 0.5);
}
.child {
background: blue;
height: 50px;
opacity: calc(var(--oc)/var(--op, 0.5));
}<div class="parent">
<div class="child" style="--oc:0.3">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
<div class="child" style="--oc:0.4">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>.parent {
opacity: var(--op, 0.5);
}
.child {
background: blue;
height: 50px;
opacity: calc(var(--oc)/var(--op, 0.5));
}<div class="parent">
<div class="child" style="--oc:0.3">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
<div class="child" style="--oc:0.4">
</div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>answered Nov 23 '18 at 20:30
Temani AfifTemani Afif
73.8k94284
edited Nov 23 '18 at 20:42
answered Nov 23 '18 at 20:30
Temani AfifTemani Afif
73.8k94284
answered Nov 23 '18 at 20:30
Temani AfifTemani Afif
73.8k94284
answered Nov 23 '18 at 20:30
Temani AfifTemani Afif
73.8k94284
73.8k94284
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450703%2fcalculating-the-childs-opacity-when-the-parent-has-a-specific-opacity%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
@fcalderan Child is more transparent, not less opaque.
:)– Praveen Kumar Purushothaman
Nov 23 '18 at 17:31