How do I change the background opacity in CSS?

Dung Do Tien May 22 2020 519

I have a div box contain a form login, it has background color is green but I want to change the opacity of that box to get more beauty box but how can I do it? 

Thanks for any suggestions.

Have 1 answer(s) found.
  • M

    Marry Christ May 22 2020

    ANSWER:

    1. Change background color opacity

      - Solution: Using rgba() background color.

      - Syntax : background: rgba(red, green, blue, alpha);

      - Example :

     div.bg_blue{
     background: rgba(0, 151, 19, 0.1); /* Opacity 10% */
}

.opacity-40{
     background: rgba(0, 151, 19, 0.4) !important; 
}
    
.opacity-80{
     background: rgba(0, 151, 19, 0.8) !important; 
}

    And below is the result :


    You can see an example here.

     

    2. Change background image opacity

    2.1 Using png image

    - I recommend using this way to do 

    2.2 Using opacity property CSS

    - This property will apply for all element tag in this div, so if the inside box has text, that text also gets opacity and maybe the user can not see it.

Related Q&A May You Like

  1. Different between == and === operators in javascript
  2. How to center text of <p> tag html using CSS?
  3. how to remove bullets from ul Html tag in css?
  4. How can I change the font size for labels in HTML?
  5. How to add a custom font into Html using CSS?
  6. What is the difference between class and id selector in CSS?
  7. [Resolved] An unhandled exception occurred: Cannot find module 'typescript' in Angular
  8. CSS Component not working when defined styleUrls in Angular
  9. Nodejs Error: "NODE_ENV" is not recognized as an internal or external command
  10. 'react-scripts' is not recognized as an internal or external command in React
  11. How to create a group of css multiple classes same style?
  12. Error: Cannot find module '@angular-devkit/core' in Angular 9
  13. Throw the error: Cannot find module 'express' in NodeJs
  14. 'rxjs/Observable' has no exported member 'Observable' in Angular
  15. MySQL error authentication plugin 'caching_sha2_password' is not supported in Python
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Most Quizs Popular

Start Test

Javascript - Functions
Start Test

Asp.Net Core - Exam test 01
Start Test

Asp.Net Core - Exam test 02
Start Test

C# - Level Beginner

Popular Tips

This site uses cookies so that we can remember you and understand how you interact with our website. This allows us to improve and customize your browsing experience. See our Cookies Policy.
X Close