How to make opacity only for background?

Question

I have a form and I need to add the background with opacity to that. Unfortunately opacity takes the form as well. How to remove opacity from the form and have it only for background?

.container {
    width: 100%;
    height: 100%;
    position: fixed;
    visibility: visible;
    display: block;
    background-color: green;
    top: 0;
    left: 0;
    opacity: 0.5;
   }
    
.form {
    width: 150px;
    height: 200px;
    background-color: blue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    align-items: center;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 8px;
    z-index: 2;
    opacity: 1; 
 }

<div class="container">
<div class="form">
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>

score 2 · Accepted Answer · answered Mar 31 '22 at 07:28

Hi if your background does not has any Images. Then easily you can apply opacity on it background. Here is some example you can use ->

background-color: #00ff0055;
/*-- The value after six digit is your alpha color or opacity of background.--*/
background-color: #0f05; /*-- Same as previous one.--*/
background-color: rgba(0,255,0,.5); /*-- a extend for alpha color--*/

Hope this help you.

score 0 · Answer 2 · answered Mar 31 '22 at 07:22

do not use opacity use rgba() or hsla()

.container {
    width: 100%;
    height: 100%;
    position: fixed;
    visibility: visible;
    display: block;
    background-color: rgba(0,0,255,0.5);
    top: 0;
    left: 0;
    /* opacity: 0.5;  do not use opacity.*/
   }

I am trying to reduce the opacity of certain objects but it is not working for me

score 0 · Answer 3 · answered Mar 31 '22 at 07:23

0

Use rgba colors for background instead opacity

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

answered Mar 31 '22 at 07:23

Nald Dev

557
5
15

score 0 · Answer 4 · answered Mar 31 '22 at 07:24

0

Just use Colors with alpha. for example rgba(255,0,0,0.5) 0.5 is your opacity value

answered Mar 31 '22 at 07:24

Im Yaver Javid

11
4

score 0 · Answer 5 · answered Mar 31 '22 at 07:31

0

Replace background-color: green; by background-color: rgba(0, 128, 0, 0.5);

and it will simply resolve it you can directly apply opacity to color

answered Mar 31 '22 at 07:31

Garandav M242

28
6

score 0 · Answer 6 · answered Mar 31 '22 at 07:34

Try this code:

.container {
    width: 100%;
    height: 100%;
    position: fixed;
    visibility: visible;
    display: block;
    background-color: green;
    top: 0;
    left: 0;
    background-color: rgba(0,128,0,0.5);
   }
    
.form {
    width: 150px;
    height: 200px;
    background-color: blue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    align-items: center;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 8px;
    z-index: 2;
 }

<div class="container">
<div class="form">
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). — Sfili_81, Mar 31 '22 at 07:37

How to make opacity only for background?

6 Answers6