I do not want to inherit the child opacity from the parent in CSS

Question

I do not want to inherit the child opacity from the parent in CSS

I do not want to inherit the child opacity from the parent in CSS.

I have one div which is the parent, and I have another div inside the first div which is the child.

I want to set the opacity property in the parent div, but I don't want the child div to inherit the opacity property.

How can I do that?

css

3 years ago by Amit8z4mc

2 Answers

Login / Signup to Answer the Question.

Login Signup

**rahul07** · Answer 1 · 2021-07-22T12:03:53

Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency.

So instead of:



background-color: rgb(0,0,255); opacity: 0.5;

use



background-color: rgba(0,0,255,0.5);

**sandhya6gczb** · Answer 2 · 2021-07-23T15:27:07

As others have mentioned in this and other similar threads, the best way to avoid this problem is to use RGBA/HSLA or else use a transparent PNG.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

I do not want to inherit the child opacity from the parent in CSS

2 Answers

Login / Signup to Answer the Question.