5

how I can change opacity of div background that doesn't make change opacity of text or anything inside of that?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="bg">
        <h1>welcome</h1>
        <p>Hello world. Welcome to my site</p>
    </div>

</body>
</html>



<style>
    .bg{
        background-color: black;
        color: #ffffff;
    }
</style>

6 Answers 6

5

Have you tried to use the RGBa notation, where 'a' stands for alpha (opacity or transparency)?

<style>
  .bg {
     background-color: rgba(0, 0, 0, 0.5);
     color: #ffffff;
   }
   </style>
Sign up to request clarification or add additional context in comments.

Comments

3

this code changes only background opacity

.bg{
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
 }

Comments

3
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div class="bg">
        <h1>welcome</h1>
        <p>Hello world. Welcome to my site</p>
    </div>

</body>
</html>



<style>
    .bg{
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
    }
</style>

Comments

2

change only background opacity with rgba

.bg{
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
 }

Comments

0

This is actually pretty easy to do using rgba() in CSS, but it's something quite a few people don't know about.

Most people know about using rgb(255,255,255) instead of #FFFFFF to set colours

You can just set the background opacity (which is the opposite of transparency, where 1 is solid and 0 is completely transparent).

.bg {
    background-color: rgba(0,0,0,0.5) //This sets background to black, with half transparency
    color: #FFFFFF;
}

Comments

0
<style>
  .backgorund_opacity {
     background-color: rgba(0, 0, 0, 0.5);  /* 0.5 use for opacity ( 0.0-0.9 )*/ 
   }
   </style>

you use also like as

.background {
    opacity: 0.5;
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.